Menubar

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

Preview Code
FileEditView
Interactive

Features

  • Full keyboard navigation.
  • Supports submenus with configurable reading direction.
  • Supports items, labels, groups of items.
  • Supports checkable items (single and multiple).
  • Typeahead character navigation.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun
Bash
ng g @ng-cn/core:c menubar

Anatomy

Import all parts and piece them together.

Typescript
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarShortcut
} from '@/ui/menubar';
Html
<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem />
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger />
        <MenubarSubContent />
      </MenubarSub>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

API Reference

Root

Contains all the parts of a menubar.

PropTypeDefault
loop boolean true
When true, keyboard navigation will loop from last item to first and vice versa.
class string —
Additional CSS classes to apply.

Menu

A top-level menu item, contains a trigger and content.

Trigger

The button that toggles the content.

PropTypeDefault
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-highlighted]Present when focused

Content

The component that pops out when a menu is open.

PropTypeDefault
align 'start' | 'center' | 'end' 'start'
The preferred alignment against the trigger.
sideOffset number 8
The distance in pixels from the trigger.
alignOffset number -4
An offset in pixels from the alignment option.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"

Item

A menubar item.

PropTypeDefault
disabled boolean false
When true, prevents the user from interacting with the item.
inset boolean false
When true, adds padding to align with checkbox/radio items.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-highlighted]Present when focused
[data-disabled]Present when disabled

CheckboxItem

A menubar item that can be checked.

PropTypeDefault
checked boolean —
The controlled checked state.
disabled boolean false
When true, prevents the user from interacting with the item.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"checked" | "unchecked"
[data-highlighted]Present when focused
[data-disabled]Present when disabled

RadioGroup

Group of menubar radio items.

PropTypeDefault
value string —
The value of the selected item.

RadioItem

A menubar item that is part of a radio group.

PropTypeDefault
value *string —
The unique value of the item.
disabled boolean false
When true, prevents the user from interacting with the item.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"checked" | "unchecked"
[data-highlighted]Present when focused
[data-disabled]Present when disabled

Sub

Contains a submenu.

SubTrigger

The item that opens a submenu.

PropTypeDefault
inset boolean false
When true, adds padding to align with checkbox/radio items.
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"
[data-highlighted]Present when focused

SubContent

The component that pops out when a submenu is open.

PropTypeDefault
class string —
Additional CSS classes to apply.

Data Attributes

AttributeValues
[data-state]"open" | "closed"

Separator

Used to visually separate items.

PropTypeDefault
class string —
Additional CSS classes to apply.

Label

Used to render a label.

PropTypeDefault
inset boolean false
When true, adds padding to align with checkbox/radio items.
class string —
Additional CSS classes to apply.

Shortcut

Displays keyboard shortcut hint.

PropTypeDefault
class string —
Additional CSS classes to apply.

Examples

Basic

A menubar with File and Edit menus.

Html
<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>

  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With checkbox and radio items

View menu with checkbox and radio options.

Html
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem [(checked)]="showToolbar">
        Show Toolbar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem [(checked)]="showSidebar">
        Show Sidebar
      </MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarLabel>Appearance</MenubarLabel>
      <MenubarRadioGroup [(value)]="theme">
        <MenubarRadioItem value="light">Light</MenubarRadioItem>
        <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
        <MenubarRadioItem value="system">System</MenubarRadioItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With submenus

Menubar with nested submenus.

Html
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Cut</MenubarItem>
      <MenubarItem>Copy</MenubarItem>
      <MenubarItem>Paste</MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Find</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Find...</MenubarItem>
          <MenubarItem>Find Next</MenubarItem>
          <MenubarItem>Find Previous</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Accessibility

Adheres to the Menu Bar WAI-ARIA design pattern .

Keyboard Interactions

KeyDescription
Space Activates the focused item.
Enter Activates the focused item.
ArrowDown Opens menu, moves focus to next item.
ArrowUp Moves focus to previous item.
ArrowRight Moves focus to next menu, or opens submenu.
ArrowLeft Moves focus to previous menu, or closes submenu.
Home Moves focus to first item.
End Moves focus to last item.
Escape Closes the open menu.
A-Z / a-z Moves focus to item starting with typed character.