- Guidelines
- React API Reference
Menu bars organize navigation and actions into horizontal menus with dropdown functionality, providing users with structured access to application features and commands.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use menu bars for primary navigation and grouping related actions logically. |
| Content | Use clear, concise labels for menu triggers and items. Group related actions within submenus. |
| Behavior | Support keyboard navigation and provide visual feedback for hover and focus states. |
| States | Clearly indicate active menus, disabled items, and selected states for radio/checkbox items. |
| Feedback | Use appropriate icons and visual cues for different item types (checkboxes, radio buttons, submenus). |
| Examples | Application menu bars, toolbar menus, context-sensitive action menus. |
Best Practices
- Logical Grouping: Organize menu items into logical categories that match user mental models.
- Consistent Labels: Use descriptive, action-oriented labels for menu items.
- Keyboard Shortcuts: Include keyboard shortcuts where appropriate to improve accessibility.
- Visual Hierarchy: Use separators and grouping to create clear visual hierarchy.
- Responsive Design: Consider how menu bars adapt to different screen sizes.
Do’s and Don’ts
Do
- Use clear, action-oriented labels for menu items. * Group related functionality together. * Provide keyboard shortcuts for common actions. * Support full keyboard navigation.
Don't
- Overcrowd the menu bar with too many top-level items. * Use ambiguous or technical jargon in menu labels. * Hide critical functionality in deeply nested submenus. * Forget to indicate disabled or unavailable actions.
Additional Guidance
- Psychological Impact:
- Familiarity: Menu bars follow established patterns that users expect in applications.
- Discoverability: Well-organized menus help users discover available features.
- Efficiency: Quick access to commands through both mouse and keyboard interactions.
1
Import
import{" "}
Copy
Ask AI
{
(Menubar,
MenubarPortal,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarGroup,
MenubarSeparator,
MenubarLabel,
MenubarItem,
MenubarShortcut,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSub,
MenubarSubTrigger,
MenubarSubContent)
}{" "}
from '@strongtie/design-system/menubar'; ```
</Step>
<Step title="Usage">
```jsx
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New <MenubarShortcut>⌘N</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>Open</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
<Menubar> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
The value of the menu that should be open when initially rendered. Use when
you do not need to control the state.
The controlled value of the menu that should be open. Should be used in
conjunction with onValueChange.
Event handler called when the value changes.
The reading direction of the menubar. If omitted, assumes LTR (left-to-right)
reading mode.
When true, keyboard navigation will loop from last item to first, and vice
versa.
<MenubarMenu> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
A unique value that associates the item with an active value when the
navigation menu is controlled.
<MenubarTrigger> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
<MenubarPortal> Props
Used to force mounting when more control is needed. Useful when controlling
animation with React animation libraries.
Specify a container element to portal the content into.
<MenubarContent> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
When true, keyboard navigation will loop from last item to first, and vice
versa.
Event handler called when auto-focusing on close. Can be prevented.
Event handler called when the escape key is down. Can be prevented.
Event handler called when a pointer event occurs outside the bounds of the
component. Can be prevented.
Event handler called when focus moves outside the bounds of the component. Can
be prevented.
Event handler called when an interaction happens outside the bounds of the
component. Can be prevented.
Used to force mounting when more control is needed. Useful when controlling
animation with React animation libraries.
The preferred side of the trigger to render against when open. Will be
reversed when collisions occur and avoidCollisions is enabled.
The distance in pixels from the trigger.
The preferred alignment against the trigger. May change when collisions occur.
An offset in pixels from the “start” or “end” alignment options.
When true, overrides the side and align preferences to prevent collisions with
boundary edges.
The element used as the collision boundary. By default this is the viewport,
though you can provide additional element(s) to be included in this check.
The distance in pixels from the boundary edges where collision detection
should occur. Accepts a number (same for all sides), or a partial padding
object
The padding between the arrow and the edges of the content. If your content
has border-radius, this will prevent it from overflowing the corners.
The sticky behavior on the align axis. “partial” will keep the content in the
boundary as long as the trigger is at least partially in the boundary whilst
“always” will keep the content in the boundary regardless.
Whether to hide the content when the trigger becomes fully occluded.
<MenubarItem> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
When true, prevents the user from interacting with the item.
Event handler called when the user selects an item (via mouse or keyboard).
Calling event.preventDefault in this handler will prevent the menubar from
closing when selecting that item.
Optional text used for typeahead purposes. By default the typeahead behavior
will use the .textContent of the item. Use this when the content is complex,
or you have non-textual content inside.
<MenubarGroup> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
<MenubarLabel> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
<MenubarCheckboxItem> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
The controlled checked state of the item. Must be used in conjunction with
onCheckedChange.
Event handler called when the checked state changes.
When true, prevents the user from interacting with the item.
Event handler called when the user selects an item (via mouse or keyboard).
Calling event.preventDefault in this handler will prevent the menubar from
closing when selecting that item.
Optional text used for typeahead purposes. By default the typeahead behavior
will use the .textContent of the item. Use this when the content is complex,
or you have non-textual content inside.
<MenubarRadioGroup> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
The value of the selected item in the group.
Event handler called when the value changes.
<MenubarRadioItem> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
The unique value of the item.
When true, prevents the user from interacting with the item.
Event handler called when the user selects an item (via mouse or keyboard).
Calling event.preventDefault in this handler will prevent the menubar from
closing when selecting that item.
Optional text used for typeahead purposes. By default the typeahead behavior
will use the .textContent of the item. Use this when the content is complex,
or you have non-textual content inside.
<MenubarSeparator> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
<MenubarSub> Props
The open state of the submenu when it is initially rendered. Use when you do
not need to control its open state.
The controlled open state of the submenu. Must be used in conjunction with
onOpenChange.
Event handler called when the open state of the submenu changes.
<MenubarSubTrigger> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
When true, prevents the user from interacting with the item.
Optional text used for typeahead purposes. By default the typeahead behavior
will use the .textContent of the item. Use this when the content is complex,
or you have non-textual content inside.
<MenubarSubContent> Props
Change the default rendered element for the one passed as a child, merging
their props and behavior.
When true, keyboard navigation will loop from last item to first, and vice
versa.
Event handler called when the escape key is down. Can be prevented.
Event handler called when a pointer event occurs outside the bounds of the
component. Can be prevented.
Event handler called when focus moves outside the bounds of the component. Can
be prevented.
Event handler called when an interaction happens outside the bounds of the
component. Can be prevented.
Used to force mounting when more control is needed. Useful when controlling
animation with React animation libraries.
The distance in pixels from the trigger.
An offset in pixels from the “start” or “end” alignment options.
When true, overrides the side and align preferences to prevent collisions with
boundary edges.
The element used as the collision boundary. By default this is the viewport,
though you can provide additional element(s) to be included in this check.
The distance in pixels from the boundary edges where collision detection
should occur. Accepts a number (same for all sides), or a partial padding
object
The padding between the arrow and the edges of the content. If your content
has border-radius, this will prevent it from overflowing the corners.
The sticky behavior on the align axis. “partial” will keep the content in the
boundary as long as the trigger is at least partially in the boundary whilst
“always” will keep the content in the boundary regardless.
Whether to hide the content when the trigger becomes fully occluded.
Usage Examples
Copy
Ask AI
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New</MenubarItem>
<MenubarItem>Open</MenubarItem>
<MenubarSeparator />
<MenubarItem>Save</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Undo</MenubarItem>
<MenubarItem>Redo</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
Styling Classes
The following CSS classes are applied by the Menubar components:menubar– Root menubar containermenubar-trigger– Menu trigger buttonsmenubar-content– Dropdown menu content containermenu-item– Base class for all menu itemsmenubar-item– Regular menu itemsmenubar-checkbox-item– Checkbox menu itemsmenubar-radio-item– Radio menu itemsmenu-item-indicator– Container for check/radio indicatorsmenu-item-label– Menu labelsmenu-item-separator– Menu separatorsmenu-item-shortcut– Keyboard shortcutsmenubar-sub-trigger– Submenu triggersmenubar-sub-content– Submenu content containers