Navigation

Menubar

New

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

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

Usage#

app.component.ts

import { WDS_MENUBAR } from '@wds/angular/menubar';

Each menu is a Dropdown: a wds-dropdown with a wds-menubar-trigger in its trigger slot and the usual dropdown items, submenus, checkbox and radio items. Name the bar with aria-label. Importing @wds/core/menubar registers the dropdown elements as well.

Examples#

Default#

Menus with shortcuts, submenus, checkbox and radio items. Once a menu is open, hovering another trigger or pressing ← and → switches menus. Selecting an item fires wds-select, which bubbles to wds-menubar.

File

New Tab⌘T

New Window⌘N

New Incognito Window

Email link

Messages

Notes

Print…⌘P

Edit

Undo⌘Z

Redo⇧⌘Z

Find

Search the web

Find…

Find Next

Find Previous

Cut

Copy

Paste

View

Always Show Bookmarks Bar

Always Show Full URLs

Reload⌘R

Force Reload⇧⌘R

Toggle Fullscreen

Hide Sidebar

Profiles

Andy

Benoit

Luis

Edit…

Add Profile…

Show code

menubar-default.ts

import { Component } from '@angular/core';
import { WdsMenubarComponent, WdsMenubarTriggerComponent } from '@wds/angular/menubar';
import { WdsDropdownComponent, WdsDropdownItemComponent, WdsDropdownRadioGroupComponent, WdsDropdownSeparatorComponent } from '@wds/angular/dropdown';

@Component({
  selector: 'app-menubar-default-demo',
  imports: [WdsMenubarComponent, WdsMenubarTriggerComponent, WdsDropdownComponent, WdsDropdownItemComponent, WdsDropdownSeparatorComponent, WdsDropdownRadioGroupComponent],
  template: `
    <wds-menubar aria-label="Browser">
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">File</wds-menubar-trigger>
        <wds-dropdown-item value="new-tab">New Tab<span slot="shortcut">⌘T</span></wds-dropdown-item>
        <wds-dropdown-item value="new-window">New Window<span slot="shortcut">⌘N</span></wds-dropdown-item>
        <wds-dropdown-item value="new-incognito" disabled>New Incognito Window</wds-dropdown-item>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown>
          <wds-dropdown-item slot="trigger">Share</wds-dropdown-item>
          <wds-dropdown-item value="share-email">Email link</wds-dropdown-item>
          <wds-dropdown-item value="share-messages">Messages</wds-dropdown-item>
          <wds-dropdown-item value="share-notes">Notes</wds-dropdown-item>
        </wds-dropdown>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="print">Print…<span slot="shortcut">⌘P</span></wds-dropdown-item>
      </wds-dropdown>
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">Edit</wds-menubar-trigger>
        <wds-dropdown-item value="undo">Undo<span slot="shortcut">⌘Z</span></wds-dropdown-item>
        <wds-dropdown-item value="redo">Redo<span slot="shortcut">⇧⌘Z</span></wds-dropdown-item>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown>
          <wds-dropdown-item slot="trigger">Find</wds-dropdown-item>
          <wds-dropdown-item value="search-web">Search the web</wds-dropdown-item>
          <wds-dropdown-separator></wds-dropdown-separator>
          <wds-dropdown-item value="find">Find…</wds-dropdown-item>
          <wds-dropdown-item value="find-next">Find Next</wds-dropdown-item>
          <wds-dropdown-item value="find-previous">Find Previous</wds-dropdown-item>
        </wds-dropdown>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="cut">Cut</wds-dropdown-item>
        <wds-dropdown-item value="copy">Copy</wds-dropdown-item>
        <wds-dropdown-item value="paste">Paste</wds-dropdown-item>
      </wds-dropdown>
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">View</wds-menubar-trigger>
        <wds-dropdown-item type="checkbox" value="bookmarks-bar">Always Show Bookmarks Bar</wds-dropdown-item>
        <wds-dropdown-item type="checkbox" value="full-urls" checked>Always Show Full URLs</wds-dropdown-item>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="reload" inset>Reload<span slot="shortcut">⌘R</span></wds-dropdown-item>
        <wds-dropdown-item value="force-reload" inset disabled>Force Reload<span slot="shortcut">⇧⌘R</span></wds-dropdown-item>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="fullscreen" inset>Toggle Fullscreen</wds-dropdown-item>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="hide-sidebar" inset>Hide Sidebar</wds-dropdown-item>
      </wds-dropdown>
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">Profiles</wds-menubar-trigger>
        <wds-dropdown-radio-group value="benoit">
          <wds-dropdown-item type="radio" value="andy">Andy</wds-dropdown-item>
          <wds-dropdown-item type="radio" value="benoit">Benoit</wds-dropdown-item>
          <wds-dropdown-item type="radio" value="luis">Luis</wds-dropdown-item>
        </wds-dropdown-radio-group>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="edit-profile" inset>Edit…</wds-dropdown-item>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="add-profile" inset>Add Profile…</wds-dropdown-item>
      </wds-dropdown>
    </wds-menubar>
  `,
})
export class MenubarDefaultDemo {}

Checkbox and radio items#

Checkbox items report their new state in wds-select (detail.checked); a wds-dropdown-radio-group fires wds-change with the chosen value.

View

Status Bar

Minimap

Theme

Light

Dark

System

Status Bar: on, Minimap: off, Theme: system

Show code

menubar-state.ts

import { Component, signal } from '@angular/core';
import { WDS_DROPDOWN } from '@wds/angular/dropdown';
import { WDS_MENUBAR } from '@wds/angular/menubar';

@Component({
  selector: 'app-menubar-state-demo',
  imports: [...WDS_DROPDOWN, ...WDS_MENUBAR],
  template: `
    <div class="flex flex-col items-center gap-3">
      <wds-menubar aria-label="Editor">
        <wds-dropdown>
          <wds-menubar-trigger slot="trigger">View</wds-menubar-trigger>
          <wds-dropdown-item type="checkbox" [checked]="statusBar()" (wdsSelect)="statusBar.set(!!$event.checked)">Status Bar</wds-dropdown-item>
          <wds-dropdown-item type="checkbox" [checked]="minimap()" (wdsSelect)="minimap.set(!!$event.checked)">Minimap</wds-dropdown-item>
        </wds-dropdown>
        <wds-dropdown>
          <wds-menubar-trigger slot="trigger">Theme</wds-menubar-trigger>
          <wds-dropdown-radio-group [value]="theme()" (wdsChange)="theme.set($event.value)">
            <wds-dropdown-item type="radio" value="light">Light</wds-dropdown-item>
            <wds-dropdown-item type="radio" value="dark">Dark</wds-dropdown-item>
            <wds-dropdown-item type="radio" value="system">System</wds-dropdown-item>
          </wds-dropdown-radio-group>
        </wds-dropdown>
      </wds-menubar>
      <p class="m-0 text-sm text-muted-foreground">
        Status Bar: {{ statusBar() ? 'on' : 'off' }}, Minimap: {{ minimap() ? 'on' : 'off' }}, Theme: {{ theme() }}
      </p>
    </div>
  `,
})
export class MenubarStateDemo {
  protected readonly statusBar = signal(true);
  protected readonly minimap = signal(false);
  protected readonly theme = signal('system');
}

Icons#

An <svg> before the text of an item; variant="destructive" for a dangerous action.

File

New File⌘N

Open Folder…⌘O

Save⌘S

Edit

Undo⌘Z

Redo⇧⌘Z

Delete

Help

Documentation

Show code

menubar-icons.ts

import { Component } from '@angular/core';
import { WdsMenubarComponent, WdsMenubarTriggerComponent } from '@wds/angular/menubar';
import { WdsDropdownComponent, WdsDropdownItemComponent, WdsDropdownSeparatorComponent } from '@wds/angular/dropdown';

@Component({
  selector: 'app-menubar-icons-demo',
  imports: [WdsMenubarComponent, WdsMenubarTriggerComponent, WdsDropdownComponent, WdsDropdownItemComponent, WdsDropdownSeparatorComponent],
  template: `
    <wds-menubar aria-label="Editor">
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">File</wds-menubar-trigger>
        <wds-dropdown-item value="new"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /></svg>New File<span slot="shortcut">⌘N</span></wds-dropdown-item>
        <wds-dropdown-item value="open"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2" /></svg>Open Folder…<span slot="shortcut">⌘O</span></wds-dropdown-item>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="save"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" /><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" /><path d="M7 3v4a1 1 0 0 0 1 1h7" /></svg>Save<span slot="shortcut">⌘S</span></wds-dropdown-item>
      </wds-dropdown>
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">Edit</wds-menubar-trigger>
        <wds-dropdown-item value="undo"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5" /><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11" /></svg>Undo<span slot="shortcut">⌘Z</span></wds-dropdown-item>
        <wds-dropdown-item value="redo"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 14 5-5-5-5" /><path d="M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13" /></svg>Redo<span slot="shortcut">⇧⌘Z</span></wds-dropdown-item>
        <wds-dropdown-separator></wds-dropdown-separator>
        <wds-dropdown-item value="delete" variant="destructive"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /></svg>Delete</wds-dropdown-item>
      </wds-dropdown>
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">Help</wds-menubar-trigger>
        <wds-dropdown-item value="docs"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><path d="M12 17h.01" /></svg>Documentation</wds-dropdown-item>
      </wds-dropdown>
    </wds-menubar>
  `,
})
export class MenubarIconsDemo {}

Disabled#

disabled on a wds-dropdown dims its trigger and keeps the menu closed; the trigger stays focusable so it can be found. disabled on an item skips it.

File

Open…

Save

Export

Edit

Undo

Help

Documentation

Keyboard Shortcuts

Show code

menubar-disabled.ts

import { Component } from '@angular/core';
import { WdsMenubarComponent, WdsMenubarTriggerComponent } from '@wds/angular/menubar';
import { WdsDropdownComponent, WdsDropdownItemComponent } from '@wds/angular/dropdown';

@Component({
  selector: 'app-menubar-disabled-demo',
  imports: [WdsMenubarComponent, WdsMenubarTriggerComponent, WdsDropdownComponent, WdsDropdownItemComponent],
  template: `
    <wds-menubar aria-label="Document">
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">File</wds-menubar-trigger>
        <wds-dropdown-item value="open">Open…</wds-dropdown-item>
        <wds-dropdown-item value="save" disabled>Save</wds-dropdown-item>
        <wds-dropdown-item value="export">Export</wds-dropdown-item>
      </wds-dropdown>
      <wds-dropdown disabled>
        <wds-menubar-trigger slot="trigger">Edit</wds-menubar-trigger>
        <wds-dropdown-item value="undo">Undo</wds-dropdown-item>
      </wds-dropdown>
      <wds-dropdown>
        <wds-menubar-trigger slot="trigger">Help</wds-menubar-trigger>
        <wds-dropdown-item value="docs">Documentation</wds-dropdown-item>
        <wds-dropdown-item value="shortcuts">Keyboard Shortcuts</wds-dropdown-item>
      </wds-dropdown>
    </wds-menubar>
  `,
})
export class MenubarDisabledDemo {}

API References#

wds-menubar#

A horizontal bar of menus, as in desktop applications (File, Edit, View…), following the WAI-ARIA menubar pattern. Each menu is a wds-dropdown with a wds-menubar-trigger in its trigger slot and the usual dropdown items: wds-dropdown-item (also checkbox and radio), -label, -separator, -group, -radio-group and submenus. Importing @wds/core/menubar registers them as well. The bar is one stop in the tab order. The arrow keys move between the menus; while a menu is open they open the next or previous one, and hovering another trigger switches to its menu.

Slots

Slot	Description
(default)	`wds-dropdown` elements, one per menu.

CSS parts (::part)

Part	Description
base	The bar.

wds-menubar-trigger#

The button of one menu in wds-menubar. Put it in the trigger slot of a wds-dropdown; the menubar and the dropdown set its role, focus order and state.

Slots

Slot	Description
(default)	Label of the menu, optionally with an `<svg>` icon.

Accessibility#

The bar is a menubar (name it with aria-label) and each trigger a menuitem with aria-haspopup="menu" and aria-expanded. The open menu is a menu with menuitem, menuitemcheckbox and menuitemradio items.

The bar is a single stop in the tab order (roving tabindex): Tab moves into the bar on the last used trigger and out of it to the next element on the page.

A disabled menu has aria-disabled="true" on its trigger. Shortcuts in the shortcut slot are only displayed; handle the keys yourself.

Keyboard support#

Key	Function
Tab	Moves focus into the bar and out of it; an open menu closes.
←→	On a trigger: moves to the previous or next menu, wrapping around. In an open menu: closes it and opens the previous or next one (in a submenu ← closes the submenu, → on a submenu trigger opens it).
EnterSpace↓	On a trigger: opens the menu and focuses the first item.
↑	On a trigger: opens the menu and focuses the last item.
HomeEnd	On a trigger: moves to the first or last menu. In a menu: the first or last item.
Escape	Closes the menu and returns focus to its trigger.
A–Z	Moves to the menu or item whose text starts with the typed characters.

Usage#

Examples#

Default#

Checkbox and radio items#

Icons#

Disabled#

API References#

wds-menubar#

Slots

CSS parts (::part)

wds-menubar-trigger#

Slots

Accessibility#

Screen reader#

Keyboard support#