NbMenuBar provides a horizontal menu bar (File, Edit, View) commonly found in desktop applications. It works seamlessly both standalone and inside NbShell.
The menu bar is composed of NbMenuBar (the container) and NbMenuBarItem (each top-level trigger with its associated dropdown).
Basic usage
vue
<template>
<NbMenuBar>
<NbMenuBarItem label="File">
<NbMenuItem label="New File" shortcut="Cmd+N" @select="newFile" />
<NbMenuItem label="Open" shortcut="Cmd+O" @select="openFile" />
<NbSubmenu label="Open Recent">
<NbMenuItem label="project.json" />
<NbMenuItem label="readme.md" />
</NbSubmenu>
<NbMenuDivider />
<NbMenuItem label="Save" shortcut="Cmd+S" @select="save" />
</NbMenuBarItem>
<NbMenuBarItem label="Edit">
<NbMenuItem label="Undo" shortcut="Cmd+Z" />
<NbMenuItem label="Redo" shortcut="Cmd+Shift+Z" />
<NbMenuDivider />
<NbMenuItem icon="scissors" label="Cut" shortcut="Cmd+X" />
<NbMenuItem icon="copy" label="Copy" shortcut="Cmd+C" />
<NbMenuItem icon="clipboard" label="Paste" shortcut="Cmd+V" />
</NbMenuBarItem>
<NbMenuBarItem label="View">
<NbMenuItem
selectable
:selected="sidebar"
label="Sidebar"
@select="sidebar = !sidebar"
/>
<NbMenuItem
selectable
:selected="inspector"
label="Inspector"
@select="inspector = !inspector"
/>
</NbMenuBarItem>
</NbMenuBar>
</template>Inside NbShell
NbShell provides a dedicated #menubar slot that renders the menu bar between the notification area and the topbar. This is the recommended placement for application menu bars.
vue
<template>
<NbShell>
<template #menubar>
<NbMenuBar>
<NbMenuBarItem label="File">
<NbMenuItem label="New" shortcut="Cmd+N" />
<NbMenuItem label="Open" shortcut="Cmd+O" />
<NbMenuDivider />
<NbMenuItem label="Save" shortcut="Cmd+S" />
</NbMenuBarItem>
<NbMenuBarItem label="Edit">
<NbMenuItem label="Undo" shortcut="Cmd+Z" />
<NbMenuItem label="Redo" shortcut="Cmd+Shift+Z" />
</NbMenuBarItem>
</NbMenuBar>
</template>
<template #topbar-left>
<h1>My Application</h1>
</template>
<p>Main content area</p>
</NbShell>
</template>With danger items
Menu items with destructive actions should use the danger prop and be separated by a divider.
Interaction behavior
The menu bar follows standard desktop menu bar conventions:
- Click a trigger to open its menu. Click again to close.
- Hover over adjacent triggers while a menu is open to switch between menus instantly.
- ArrowLeft / ArrowRight cycles between top-level triggers.
- Escape closes the active menu and returns focus to its trigger.
Keyboard navigation
| Key | Action |
|---|---|
ArrowRight | Focus next trigger (and switch menu if one is open) |
ArrowLeft | Focus previous trigger (and switch menu if one is open) |
Enter / Space | Open/close the focused trigger's menu |
ArrowDown | Navigate within the open menu |
Escape | Close the active menu |