Command Palette
Search for a command to run...
Menubar
Displays a persistent menu bar with dropdown menus for organizing commands and navigation.About Menubar
A container for displaying menu items that can be expanded to show additional options. Supports sub-menus, separators, labels, and various item types including standard items, checkboxes, and radio groups.Installation
Import the Menubar component from LSD:import { Menubar } from '@nipsys/lsd'
export default function MyComponent() {
return <Menubar />
}Usage
The simplest form of the component with default styling.Basic
Variants
Component variants for different visual styles and use cases.Destructive
Features
Additional features and capabilities of the component.Checkbox Items
Inset
Labels Separators
Radio Items
Shortcuts
Submenus
Composition
Menubar
└── MenubarMenu
├── MenubarTrigger
└── MenubarPortal
API Reference
Radix UI Documentation
Menubar wraps Radix UI primitives
Accessibility
The component follows accessibility best practices for screen readers and keyboard navigation.Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to menubar triggers• Arrow Left/Right - Navigate between menu triggers• Enter, Space, or Arrow Down - Open menu• Arrow Up/Down - Navigate menu items• Enter or Space - Select item• Escape - Close menu• Arrow Right - Open submenu from item• Arrow Left - Return to parent menu
ARIA Attributes
Proper ARIA attributes for screen readers
• role="menubar" identifies the container• role="menu" identifies dropdown content• role="menuitem" for standard items• role="menuitemcheckbox" for checkbox items• role="menuitemradio" for radio items• aria-expanded indicates open/closed state• aria-checked indicates checkbox/radio state• aria-orientation="horizontal" on menubar
Focus States
Visible focus indicators for keyboard users
• Focus moves between triggers with arrow keys. When menu opens, focus moves to first item. Focus is trapped in open menu. Focus returns to trigger when closing.