Getting Started
Foundations
Components
Search for a command to run...
Menubar provides a desktop application-style menu system with multiple top-level menu triggers that open dropdown menus. It's commonly used in application headers or toolbars to organize commands and actions into logical groups. Each menu can contain items, checkboxes, radio groups, separators, and nested submenus.
Built on top of Radix UI's Menubar primitive with full keyboard navigation (Arrow keys to navigate between menus and items, Enter/Space to activate), type-ahead search, focus management, and accessibility support including proper ARIA attributes and roles.
import { Menubar } from "@strongtie/design-system/menubar"This module exports the following components:
MenubarMenubarPortalMenubarMenuMenubarTriggerMenubarContentMenubarGroupMenubarSeparatorMenubarLabelMenubarItemMenubarShortcutMenubarCheckboxItemMenubarRadioGroupMenubarRadioItemMenubarSubMenubarSubTriggerMenubarSubContent<MenubarMenu>This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.
| Prop | Type | Default | Description |
|---|
<MenubarLabel>This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - |
<MenubarItem>This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - | |
variant | default | destructive | default |
<MenubarSubTrigger>This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | - |
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
The following data attributes are used to identify component parts:
menubarmenubar-checkbox-itemmenubar-contentmenubar-groupmenubar-itemmenubar-labelmenubar-menumenubar-portalmenubar-radio-groupmenubar-radio-itemmenubar-separatormenubar-shortcutmenubar-submenubar-sub-contentmenubar-sub-triggermenubar-triggerOther CSS classes used by this component:
menu-itemmenu-item-indicatormenu-item-labelmenu-item-separatormenu-item-shortcutmenubarmenubar-checkbox-itemmenubar-contentmenubar-itemmenubar-labelmenubar-radio-itemmenubar-separatormenubar-shortcutmenubar-sub-contentmenubar-sub-triggermenubar-triggerThis component inherits accessibility features from Radix UI, including: