Default
A full menu bar with File, Edit, and View menus including keyboard shortcuts.
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>Print</MenubarItem>
</MenubarContent>
</MenubarMenu>
…
</Menubar>Checkbox items
Toggle boolean settings within a menu using MenubarCheckboxItem.
const [showBookmarks, setShowBookmarks] = useState(true);
<MenubarCheckboxItem
checked={showBookmarks}
onCheckedChange={setShowBookmarks}
>
Show Bookmarks Bar
</MenubarCheckboxItem>Radio items
Select one option from a group using MenubarRadioGroup and MenubarRadioItem.
const [person, setPerson] = useState('pedro');
<MenubarRadioGroup value={person} onValueChange={setPerson}>
<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
<MenubarRadioItem value="pedro">Pedro</MenubarRadioItem>
<MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
</MenubarRadioGroup>Production actions
Use larger density, elevated content, constrained menu height, and item tones for command-heavy application headers.
<Menubar size="lg" surface="outline" justify="between" fullWidth>
<MenubarMenu>
<MenubarTrigger size="lg" surface="outline">Workflow</MenubarTrigger>
<MenubarContent size="xl" surface="elevated" maxHeight="md" animation="slide">
<MenubarLabel size="lg">Review actions</MenubarLabel>
<MenubarItem size="lg" tone="success">
Approve request <MenubarShortcut size="lg">⌘↵</MenubarShortcut>
</MenubarItem>
<MenubarItem size="lg" tone="warning">Request changes</MenubarItem>
<MenubarSeparator />
<MenubarItem size="lg" tone="danger">
Reject request <MenubarShortcut size="lg">⌘⌫</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>