Menubar
A visually persistent menu common in desktop applications.
Menubar wraps the Base UI Menubar primitive and composes the Dropdown Menu parts, so its content, items, separators and submenus keep that Port's design. It is an Authored component: coss/ui has no Menubar, so its Structure comes from shadcn/ui and its Design from the nearest Port.
Installation
npx shadcn@latest add @kosori/menubarExample
menubar-example.tsx
import {
Menubar,
MenubarCheckboxItem,
MenubarContent,
MenubarGroup,
MenubarItem,
MenubarLabel,
MenubarMenu,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSeparator,
MenubarShortcut,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
} from '@/components/ui/menubar';
const MenubarExample = () => (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New tab
<MenubarShortcut>⌘T</MenubarShortcut>
</MenubarItem>
<MenubarItem>
New window
<MenubarShortcut>⌘N</MenubarShortcut>
</MenubarItem>
<MenubarItem disabled>New incognito window</MenubarItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Share</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>Email link</MenubarItem>
<MenubarItem>Messages</MenubarItem>
<MenubarItem>Notes</MenubarItem>
</MenubarSubContent>
</MenubarSub>
<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>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Find</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>Search the web</MenubarItem>
<MenubarSeparator />
<MenubarItem>Find…</MenubarItem>
<MenubarItem>Find next</MenubarItem>
<MenubarItem>Find previous</MenubarItem>
</MenubarSubContent>
</MenubarSub>
<MenubarSeparator />
<MenubarItem>Cut</MenubarItem>
<MenubarItem>Copy</MenubarItem>
<MenubarItem>Paste</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarGroup>
<MenubarLabel>Appearance</MenubarLabel>
<MenubarCheckboxItem defaultChecked>Show toolbar</MenubarCheckboxItem>
<MenubarCheckboxItem>Show sidebar</MenubarCheckboxItem>
</MenubarGroup>
<MenubarSeparator />
<MenubarGroup>
<MenubarLabel>Zoom</MenubarLabel>
<MenubarRadioGroup defaultValue='100'>
<MenubarRadioItem value='50'>50%</MenubarRadioItem>
<MenubarRadioItem value='100'>100%</MenubarRadioItem>
<MenubarRadioItem value='150'>150%</MenubarRadioItem>
</MenubarRadioGroup>
</MenubarGroup>
</MenubarContent>
</MenubarMenu>
</Menubar>
);
export default MenubarExample;
Usage
import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarTrigger,
} from '@/components/ui/menubar';
const MenubarDemo = () => (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New tab</MenubarItem>
<MenubarItem>New window</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
);