Menubar
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
Installation
npx shadcn@latest add https://spoke.georgedrury.co.uk/r/menubarLineage
Anatomy
import {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
} from "@/components/ui/menubar"
export default () => (
<Menubar>
<MenubarMenu>
<MenubarTrigger />
<MenubarContent>
<MenubarItem />
</MenubarContent>
</MenubarMenu>
</Menubar>
)Spoke utility classes
| Class | Fallback chain | Description |
|---|---|---|
--menubar | var(--background) | Colour for menubar |
--menubar-border | var(--border) | Border colour for menubar |
--menubar-radius | var(--radius-md) | Border radius for menubar |
--shadow-menubar | var(--shadow-xs) | Box shadow for menubar |
--menubar-content | var(--popover) | Colour for content menubar variant |
--menubar-content-foreground | var(--popover-foreground) | Text/icon colour for content menubar variant |
--menubar-content-border | var(--border) | Border colour for content menubar variant |
--menubar-content-radius | var(--radius-md) | Border radius for content |
--shadow-menubar-content | var(--shadow-md) | Box shadow for menubar content |