Menubar
A menu bar providing commands and options for your application.
View as MarkdownAnatomy
Import the component and assemble its parts:
import { Menubar } from '@base-ui-components/react/menubar';
import { Menu } from '@base-ui-components/react/menu';
<Menubar>
<Menu.Root>
<Menu.Trigger />
<Menu.Portal>
<Menu.Backdrop />
<Menu.Positioner>
<Menu.Popup>
<Menu.Arrow />
<Menu.Item />
<Menu.Separator />
<Menu.Group>
<Menu.GroupLabel />
</Menu.Group>
<Menu.RadioGroup>
<Menu.RadioItem />
</Menu.RadioGroup>
<Menu.CheckboxItem />
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
</Menubar>
API reference
modal
boolean
(default: true
)
boolean
true
- Name
- Description
Whether the menubar is modal.
- Type
boolean
- Default
true
disabled
boolean
(default: false
)
boolean
false
- Name
- Description
Whether the whole menubar is disabled.
- Type
boolean
- Default
false
loop
boolean
(default: true
)
boolean
true
- Name
- Description
Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
- Type
boolean
- Default
true
orientation
Menu.Root.Orientation
(default: 'horizontal'
)
Menu.Root.Orientation
'horizontal'
- Name
- Description
The orientation of the menubar.
- Type
Menu.Root.Orientation
- Default
'horizontal'
className
string | function
string | function
- Name
- Description
CSS class applied to the element, or a function that returns a class based on the component’s state.
- Type
| string
| ((state: Menubar.State) => string)
render
ReactElement | function
ReactElement | function
- Name
- Description
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.- Type
| ReactElement
| ((props: HTMLProps, state: Menubar.State) => ReactElement)