Menubar
A row of menus on the toolbar's pill, where the arrows move between them once one is open.
01Preview
0102Installation
npx shadcn@latest add https://aiellie.app/r/menubar.json03API reference
01From the Base UI documentation
The container for menus.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| loopFocus | boolean | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| modal | boolean | true | Whether the menubar is modal. |
| disabled | boolean | false | Whether the whole menubar is disabled. |
| orientation | MenuRoot.Orientation | 'horizontal' | The orientation of the menubar. |
| className | string | ((state: Menubar.State) => string | undefined) | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
| style | React.CSSProperties | ((state: Menubar.State) => React.CSSProperties | undefined) | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement | ((props: HTMLProps, state: Menubar.State) => ReactElement) | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Data Attributes
| Attribute | Type | Description |
|---|---|---|
| data-orientation | 'horizontal' | 'vertical' | Determines the orientation of the menubar. |
| data-has-submenu-open | - | Present when any submenu within the menubar is open. |
| data-modal | - | Present when the corresponding menubar is modal. |