DEV Community

loading...
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.

Setup

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

Import

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

SubMenus

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: 'http://primetek.com.tr'}]
    },
    {
        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

Theming

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

Resources

Visit the PrimeReact Menu showcase for demos and documentation.

Discussion (0)

pic
Editor guide