Menubar
Provide application menus with keyboard navigation.
Preview
Import
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarCheckboxItem, MenubarRadioItem } from "@sigil-ui/components";Usage
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New</MenubarItem>
<MenubarItem>Open</MenubarItem>
<MenubarSeparator />
<MenubarItem>Save</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Undo</MenubarItem>
<MenubarItem>Redo</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>Sub-components
This component includes the following parts:
<MenubarMenu><MenubarTrigger><MenubarContent><MenubarItem><MenubarSeparator><MenubarCheckboxItem><MenubarRadioItem>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-md | Radius md |
--s-border-style | Border style |
--s-border | Border |
--s-surface | Surface |
--s-radius-sm | Radius sm |
--s-text | Text |
--s-surface-elevated | Surface elevated |
--s-shadow-md | Shadow md |
--s-duration-fast | Duration fast |