DEV Community

Cover image for React Menu

React Menu

primetek profile image PrimeTek ・1 min read

React Menu is a navigation/command component that supports dynamic and static positioning.


Refer to PrimeReact setup documentation for download and installation steps for your environment.


import { Menu } from 'primereact/menu';
Enter fullscreen mode Exit fullscreen mode

MenuModel API

Menu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

Menu requires a collection of menuitems as its model.

<Menu model={items} />
Enter fullscreen mode Exit fullscreen mode
let items = [
    {label: 'New', icon: 'pi pi-fw pi-plus'},
    {label: 'Delete', icon: 'pi pi-fw pi-trash'}
Enter fullscreen mode Exit fullscreen mode


Menu supports one level of nesting via subitems of an item.

let items = [
        label: 'Options',
        items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
                {label: 'Delete', icon: 'pi pi-fw pi-trash', url: ''}]
        label: 'Account',
        items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
                {label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
Enter fullscreen mode Exit fullscreen mode

Popup Mode

Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.

<Menu model={items} popup ref={menu} />
<Button label="Show" icon="pi pi-bars" onClick={(event) => menu.current.toggle(event)}/>
Enter fullscreen mode Exit fullscreen mode


Menu supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.


Visit the PrimeReact Menu showcase for demos and documentation.

Discussion (0)

Editor guide