styledMenu
Menubar
Menubar coordinates multiple Menu instances horizontally or vertically, providing keyboard navigation between them and a single source of truth for which menu is open.
preview
Usage#
import { Menubar } from '@primereact/ui/menubar';
import { Menu } from '@primereact/ui/menu';<Menubar>
<Menu.Root id="file">
<Menu.Trigger />
<Menu.Portal>
<Menu.Positioner>
<Menu.Popup>
<Menu.List>
<Menu.Item />
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
<Menu.Root id="edit"></Menu.Root>
</Menubar>Examples#
Basic#
A standard menubar with multiple top-level menus and grouped items.
basic-demo
'use client';
import { Clipboard } from '@primeicons/react/clipboard';
import { Copy } from '@primeicons/react/copy';
import { Download } from '@primeicons/react/download';
import { File } from '@primeicons/react/file';
import { FolderOpen } from '@primeicons/react/folder-open';
import { Replay } from '@primeicons/react/replay';
import { Save } from '@primeicons/react/save';
import { Undo } from '@primeicons/react/undo';
import { Menu } from '@primereact/ui/menu';
import { Menubar } from '@primereact/ui/menubar';
const Shortcut = ({ children }: { children: React.ReactNode }) => (
<span className="ms-auto text-xs text-surface-500 dark:text-surface-400">{children}</span>
);
export default function BasicDemo() {
return (
<div className="flex justify-center">
<Menubar>
<Menu.Root>
<Menu.Trigger>File</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup className="w-44">
<Menu.List>
<Menu.Group>
<Menu.Item>
<File />
New Document <Shortcut>⌘ N</Shortcut>
</Menu.Item>
<Menu.Item>
<FolderOpen />
Open <Shortcut>⌘ O</Shortcut>
</Menu.Item>
</Menu.Group>
<Menu.Separator />
<Menu.Group>
<Menu.Item>
<Save />
Save <Shortcut>⌘ S</Shortcut>
</Menu.Item>
<Menu.Item>
<Download />
Save As… <Shortcut>⇧ ⌘ S</Shortcut>
</Menu.Item>
</Menu.Group>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
<Menu.Root>
<Menu.Trigger>Edit</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup className="w-44">
<Menu.List>
<Menu.Group>
<Menu.Item>
<Undo />
Undo <Shortcut>⌘ Z</Shortcut>
</Menu.Item>
<Menu.Item>
<Replay />
Redo <Shortcut>⇧ ⌘ Z</Shortcut>
</Menu.Item>
</Menu.Group>
<Menu.Separator />
<Menu.Group>
<Menu.Item>
<Clipboard />
Cut <Shortcut>⌘ X</Shortcut>
</Menu.Item>
<Menu.Item>
<Copy />
Copy <Shortcut>⌘ C</Shortcut>
</Menu.Item>
<Menu.Item>
<File />
Paste <Shortcut>⌘ V</Shortcut>
</Menu.Item>
</Menu.Group>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
<Menu.Root>
<Menu.Trigger>View</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup className="w-40">
<Menu.List>
<Menu.Group>
<Menu.Item>Zoom In</Menu.Item>
<Menu.Item>Zoom Out</Menu.Item>
<Menu.Item>Reset Zoom</Menu.Item>
</Menu.Group>
<Menu.Separator />
<Menu.Group>
<Menu.Item>Full Screen</Menu.Item>
</Menu.Group>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
<Menu.Root>
<Menu.Trigger>Help</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup className="w-44">
<Menu.List>
<Menu.Group>
<Menu.Item>Documentation</Menu.Item>
<Menu.Item>Support</Menu.Item>
</Menu.Group>
<Menu.Separator />
<Menu.Group>
<Menu.Item>About</Menu.Item>
</Menu.Group>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
</Menubar>
</div>
);
}
Submenus#
Nest a Menu.Sub inside any menu's list to add cascading submenus that share the same Menubar's keyboard navigation.
submenu-demo
'use client';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { Menu } from '@primereact/ui/menu';
import { Menubar } from '@primereact/ui/menubar';
export default function SubmenuDemo() {
return (
<div className="flex justify-center">
<Menubar>
<Menu.Root>
<Menu.Trigger>File</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup className="w-44">
<Menu.List>
<Menu.Group>
<Menu.Item>New File</Menu.Item>
<Menu.Item>Open File…</Menu.Item>
<Menu.Sub>
<Menu.SubTrigger>
Open Recent
<Menu.Indicator>
<ChevronRight className="size-3.5" />
</Menu.Indicator>
</Menu.SubTrigger>
<Menu.Portal>
<Menu.Positioner>
<Menu.Popup className="w-40">
<Menu.List>
<Menu.Group>
<Menu.Item>todo.md</Menu.Item>
<Menu.Item>changelog.md</Menu.Item>
<Menu.Item>readme.md</Menu.Item>
<Menu.Sub>
<Menu.SubTrigger>
Older
<Menu.Indicator>
<ChevronRight className="size-3.5" />
</Menu.Indicator>
</Menu.SubTrigger>
<Menu.Portal>
<Menu.Positioner>
<Menu.Popup className="w-40">
<Menu.List>
<Menu.Group>
<Menu.Item>release-notes.md</Menu.Item>
<Menu.Item>roadmap.md</Menu.Item>
<Menu.Item>contributing.md</Menu.Item>
<Menu.Item>license.txt</Menu.Item>
</Menu.Group>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Sub>
</Menu.Group>
<Menu.Separator />
<Menu.Group>
<Menu.Item>Clear Recent</Menu.Item>
</Menu.Group>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Sub>
</Menu.Group>
<Menu.Separator />
<Menu.Group>
<Menu.Item>Save</Menu.Item>
<Menu.Item>Save As…</Menu.Item>
</Menu.Group>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
<Menu.Root>
<Menu.Trigger>View</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup className="w-44">
<Menu.List>
<Menu.Group>
<Menu.Item>Reload</Menu.Item>
<Menu.Item>Force Reload</Menu.Item>
</Menu.Group>
<Menu.Separator />
<Menu.Group>
<Menu.Item>Toggle DevTools</Menu.Item>
</Menu.Group>
</Menu.List>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
</Menubar>
</div>
);
}
API#
Sub-Components#
See Primitive API for Menubar component documentation, and Menu for the Menu.* parts used as children.
Hooks#
See Headless API for useMenubar hook documentation.
Accessibility#
See Menubar Primitive for WAI-ARIA compliance details and keyboard support.