Mushilu-San UI Menubar
A horizontal bar of menus, such as File, Edit and View, for desktop-style commands.
Selector: mui-menubar
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator } from '@mushilu-san/ui/navigation';Loading example…
Overview
role="menubar". Each MenubarTrigger opens a menu of MenubarItem commands. Arrow keys move between triggers and items, and Escape closes the open menu.
role="menuitem" and separators are role="separator". Use MenubarSeparator to group related commands.
When to use
Desktop-style apps with many commands grouped by category. Editors and tools where users expect File, Edit and View menus.
When not to use
Site navigation with links to pages. Use a navigation menu. Use Navigation menu instead.A single menu of actions on one button. Use a dropdown menu. Use Dropdown menu instead.
Guidelines
Do
Keep the top-level titles to one word. Show keyboard shortcuts with the command when there is one.
Don't
Do not use a menubar on mobile. Use a bottom navigation or a sheet.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | menubar | aria-label from label, default "Menu bar". |
trigger | menuitem | aria-expanded follows the menu state. |
item | menuitem | |
separator | separator |
Keyboard
| Keys | Action |
|---|---|
| ArrowLeftArrowRight | |
| ArrowDownArrowUp | |
| EnterSpace | |
| Escape |
Disabled items are skipped by the arrow keys.
API
Menubar
| Name | Type | Default | Description |
|---|---|---|---|
label | string | 'Menu bar' | Accessible name of the menubar. Default `Menu bar`. |
CSS parts
::part(root)
MenubarMenu
CSS parts
::part(menu)
MenubarTrigger
CSS parts
::part(trigger)
MenubarContent
CSS parts
::part(content)
MenubarItem
| Name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disables this item. It is skipped by the arrow keys. Accepts attribute presence, e.g. <… disabled>. |
CSS parts
::part(item)
MenubarSeparator
CSS parts
::part(separator)
Tokens
--mui-color-surface-raised--mui-color-border--mui-color-focus-ring--mui-shadow-2