Use Menubar for a desktop-style application menu.
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@tile-ui/react';
export default function MenubarDemo() {
return (
<Menubar>
<MenubarMenu value="file">
Registry install
pnpm dlx shadcn@latest add @tile-ui/menubar
Package usage
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@tile-ui/react';
<Menubar>
<MenubarMenu value="file">
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New</MenubarItem>
<MenubarItem>Open</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
Highlights
- Multiple menus
- Trigger and content
- Checkbox and radio items
Registry dependencies
| Item | Purpose |
|---|
menubar | Component source and module styles |
core | Framework-agnostic logic helpers |
styles | Shared SCSS tokens and globals |
API reference
| Prop | Type | Default |
|---|
value | string | — |
defaultValue | string | — |
onValueChange | (value: string | undefined) => void | — |
| Prop | Type | Default |
|---|
value | string | — |
| Prop | Type | Default |
|---|
disabled | boolean | — |
| Prop | Type | Default |
|---|
side | 'top' | 'right' | 'bottom' | 'left' | — |
align | 'start' | 'center' | 'end' | — |
sideOffset | number | — |
alignOffset | number | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
variant | 'default' | 'destructive' | — |
disabled | boolean | — |
onSelect | (event: Event) => void | — |
| Prop | Type | Default |
|---|
checked | boolean | — |
defaultChecked | boolean | — |
onCheckedChange | (checked: boolean) => void | — |
disabled | boolean | — |
| Prop | Type | Default |
|---|
value | string | — |
defaultValue | string | — |
onValueChange | (value: string) => void | — |
| Prop | Type | Default |
|---|
value | string | — |
disabled | boolean | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
| Prop | Type | Default |
|---|
open | boolean | — |
defaultOpen | boolean | — |
onOpenChange | (open: boolean) => void | — |
| Prop | Type | Default |
|---|
inset | boolean | — |
disabled | boolean | — |