Components
Menubar
A horizontal menu bar with dropdown menus, commonly used for application-level navigation.
Preview
'use client'; import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from '@/registry/san-francisco/ui/menubar'; export default function MenubarDemo() { return ( <Menubar> <MenubarMenu> <MenubarTrigger>File</MenubarTrigger> <MenubarContent> <MenubarItem> New Tab <MenubarShortcut>⌘T</MenubarShortcut> </MenubarItem> <MenubarItem> New Window <MenubarShortcut>⌘N</MenubarShortcut> </MenubarItem> <MenubarSeparator /> <MenubarItem> Print <MenubarShortcut>⌘P</MenubarShortcut> </MenubarItem> </MenubarContent> </MenubarMenu> <MenubarMenu> <MenubarTrigger>Edit</MenubarTrigger> <MenubarContent> <MenubarItem> Undo <MenubarShortcut>⌘Z</MenubarShortcut> </MenubarItem> <MenubarItem> Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut> </MenubarItem> </MenubarContent> </MenubarMenu> </Menubar> ); }
Installation
bunx shadcn@latest add @sft-ui/menubarWith Checkbox Items
'use client'; import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from '@/registry/san-francisco/ui/menubar'; export default function MenubarDemoCheckbox() { return ( <Menubar> <MenubarMenu> <MenubarTrigger>View</MenubarTrigger> <MenubarContent> <MenubarCheckboxItem checked>Status Bar</MenubarCheckboxItem> <MenubarCheckboxItem>Word Wrap</MenubarCheckboxItem> <MenubarSeparator /> <MenubarItem>Zoom In</MenubarItem> <MenubarItem>Zoom Out</MenubarItem> </MenubarContent> </MenubarMenu> </Menubar> ); }
With Submenus
'use client'; import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, } from '@/registry/san-francisco/ui/menubar'; export default function MenubarDemoSubmenu() { return ( <Menubar> <MenubarMenu> <MenubarTrigger>File</MenubarTrigger> <MenubarContent> <MenubarSub> <MenubarSubTrigger>Share</MenubarSubTrigger> <MenubarSubContent> <MenubarItem>Email</MenubarItem> <MenubarItem>Messages</MenubarItem> </MenubarSubContent> </MenubarSub> <MenubarSeparator /> <MenubarItem>Print</MenubarItem> </MenubarContent> </MenubarMenu> </Menubar> ); }
API Reference
See the Base UI Menubar documentation for the API reference.