navigation/@mihcm/ui·v0.21.0·stable
Menubar
Horizontal menu bar with dropdown menus, powered by Radix. Supports density, surfaces, alignment, dropdown sizing, portal behavior, animation, item tones, shortcuts, checkbox/radio items, and submenus.
Props
The full prop API for Menubar. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Density for root, trigger, item, label, and shortcut components. | 0.10.1 |
surface | 'default' | 'soft' | 'outline' | 'ghost' | 'default' | Root and trigger visual treatment. | 0.10.1 |
justify | 'start' | 'center' | 'between' | 'end' | 'start' | Top-level trigger alignment. On Menubar. | 0.10.1 |
wrap / fullWidth | boolean | false | Allow wrapping or fill the parent width. On Menubar. | 0.10.1 |
content size | 'sm' | 'md' | 'lg' | 'xl' | 'auto' | 'md' | Dropdown minimum width preset. On MenubarContent and MenubarSubContent. | 0.10.1 |
content surface | 'default' | 'soft' | 'outline' | 'elevated' | 'plain' | 'default' | Dropdown surface treatment. On MenubarContent and MenubarSubContent. | 0.10.1 |
padding | 'none' | 'sm' | 'md' | 'md' | Dropdown padding preset. On MenubarContent and MenubarSubContent. | 0.10.1 |
animation | 'scale' | 'slide' | 'fade' | 'none' | 'scale' | Dropdown open/close animation preset. | 0.10.1 |
portal | boolean | true | Render dropdown in a Radix portal. On MenubarContent and MenubarSubContent. | 0.10.1 |
maxHeight | 'none' | 'sm' | 'md' | 'lg' | 'none' | Scrollable dropdown max-height preset. | 0.10.1 |
tone | 'default' | 'accent' | 'danger' | 'success' | 'warning' | 'default' | Command intent tone. On MenubarItem, MenubarCheckboxItem, MenubarRadioItem, MenubarSubTrigger. | 0.10.1 |
inset | boolean | false | Adds left padding to align with checkbox/radio items. On MenubarItem, MenubarSubTrigger, MenubarLabel. | 0.6.0 |
checked | boolean | false | Checked state. On MenubarCheckboxItem. | 0.6.0 |
value | string | — | Radio item value. On MenubarRadioItem. | 0.6.0 |
disabled | boolean | false | Disables interaction. On any item. | 0.6.0 |
className | string | — | Additional Tailwind classes. | 0.6.0 |
Import
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarShortcut } from '@mihcm/ui/Menubar';