HelixTimelyCare Experience Design System
Light

Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Spec · from metadata

When to use

  • •Application-level menu bars (File, Edit, View, Help pattern)
  • •Desktop-style app interfaces with persistent top-level menus
  • •Complex applications that need organized, grouped actions in a menu bar

When not to use

  • •Single action menus from a button -- use DropdownMenu instead
  • •Website navigation links -- use NavigationMenu instead
  • •Right-click contextual menus -- use ContextMenu instead
  • •Mobile interfaces -- menu bars are a desktop pattern

Variants

PropValuesDefaultDescription
variant (on MenubarItem)defaultdestructivedefaultControls item styling. 'destructive' applies red text and destructive focus styles.

Anti-patterns

Avoid// Website navigation using Menubar
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Products</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <a href="/widgets">Widgets</a>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
Prefer<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/widgets">Widgets</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Menubar is for application actions (File/Edit/View). Website navigation should use NavigationMenu, which supports link semantics and mega-menu content layouts.

Accessibility

  • Screen readerRoot element has role='menubar'. Each top-level trigger has role='menuitem'. Dropdown content has role='menu'. Checkbox and radio items announce their state.
  • ContrastBar uses bg-background. Menus use bg-popover/text-popover-foreground. Focus uses bg-accent/text-accent-foreground.

Token bindings

TokenCategoryUsage
bg-backgroundcolorMenubar background
bg-popovercolorMenu content background
text-popover-foregroundcolorMenu text
bg-accentcolorFocused/open trigger and item background
text-accent-foregroundcolorFocused item text
text-destructivecolorDestructive item text
text-muted-foregroundcolorShortcut text
bg-bordercolorSeparator
shadow-xsshadowMenubar bar elevation
shadow-mdshadowMenu content elevation
rounded-mdradiusBar and menu border radius

Import

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarShortcut,
} from "@timelycare/helix-ui"

Props

interface MenubarItemProps {
  disabled?: boolean
  onSelect?: () => void
  children: React.ReactNode
}

interface MenubarCheckboxItemProps {
  checked?: boolean
  onCheckedChange?: (checked: boolean) => void
  disabled?: boolean
}

interface MenubarRadioItemProps {
  value: string
  disabled?: boolean
}

Anatomy

PartTailwind
Menubar (container)h-9 bg-background border rounded-md shadow-xs p-1 gap-1
MenubarTriggerpx-3 py-1 rounded-xs text-sm text-popover-foreground
MenubarContentbg-popover border rounded-md shadow-md p-1 min-w-48
MenubarItempx-2 py-1.5 rounded-sm text-sm text-popover-foreground
MenubarSeparator-mx-1 my-1 h-px bg-border

Item Variants

VariantUse ForLeft Padding
defaultStandard menu actionspx-2
checkboxToggleable optionspl-8 pr-2 (space for check icon)
radioMutually exclusive choicespl-8 pr-2 (space for dot indicator)

States

StateTriggerItem
Defaultbg-transparent text-popover-foregroundbg-transparent text-popover-foreground
Hover/Openbg-accent text-accent-foregroundbg-accent text-accent-foreground
Disabled—text-muted-foreground pointer-events-none

Icons & Shortcuts

Indicator icons (checkbox/radio): h-4 w-4 at left-2 absolute position SubTrigger chevron: h-4 w-4 ChevronRight, right-aligned Shortcut text: text-xs text-muted-foreground ml-auto tracking-widest

Common Patterns

Basic Menubar

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>
      <MenubarItem>New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print <MenubarShortcut>⌘P</MenubarShortcut></MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With Checkbox Items

<MenubarCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
  Show Toolbar
</MenubarCheckboxItem>

With Radio Group

<MenubarRadioGroup value={profile} onValueChange={setProfile}>
  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
  <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
</MenubarRadioGroup>

With Submenu

<MenubarSub>
  <MenubarSubTrigger>Share</MenubarSubTrigger>
  <MenubarSubContent>
    <MenubarItem>Email link</MenubarItem>
    <MenubarItem>Messages</MenubarItem>
  </MenubarSubContent>
</MenubarSub>

Accessibility

  • Built on Radix Menubar — handles keyboard and focus automatically
  • Keyboard: Arrow Left/Right between menus, Arrow Up/Down within menu, Enter to select, Escape to close
  • Screen reader: announces menubar role and menu items
  • Typeahead search supported within menus

Gotchas

ProblemSolution
Shortcuts not alignedUse MenubarShortcut, not plain text
Radio items not groupedWrap in MenubarRadioGroup with shared state
Submenu arrow missingUse MenubarSubTrigger not MenubarItem
Checkbox spacing offUses pl-8 to reserve indicator space

See Also

Last updated: February 9, 2026