Skip to Content
ComponentsMenubar

Menubar

The application menu bar: File, Edit, View, each opening its own menu.

Its own component rather than a row of DropdownMenus, because a menu bar behaves as one control. Once a menu is open, moving the pointer to a neighbouring trigger switches to it without a click, and the arrow keys move between menus as well as within them.

Live Examples

Live Example
☀️
Copy
View Code
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarShortcut, MenubarCheckboxItem } from '@jarllyng/nostromo' export default function MenubarExample() { const [wrap, setWrap] = React.useState(true) return ( <Menubar> <MenubarMenu> <MenubarTrigger>File</MenubarTrigger>...

Open one menu, then move the pointer sideways. The next menu opens on its own.

Import

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
} from "@jarllyng/nostromo";

Props

MenubarItem takes destructive and inset, the same as DropdownMenuItem. Checkbox items, radio groups, labels, separators, shortcuts and submenus all have the same shape as their dropdown counterparts, and share their styling, so the three menus in this library cannot drift apart.

DropdownMenu for a single menu from a button, ContextMenu for right-click.

Last updated on
BreadcrumbNavigationMenu