Ivorie

Menubar

A row of menus, like the one at the top of a desktop app.

import { … } from '@inlaylab/ivorie/menubar'
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_MENUBAR_IMPORTS } from '@inlaylab/ivorie/menubar';

@Component({
  selector: 'demo-menubar',
  imports: [IV_MENUBAR_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-menubar>
      <iv-menubar-menu>
        <button ivMenubarTrigger>File</button>
        <iv-dropdown-menu-content>
          <iv-dropdown-menu-item>New tab<iv-dropdown-menu-shortcut>⌘T</iv-dropdown-menu-shortcut></iv-dropdown-menu-item>
          <iv-dropdown-menu-item>New window<iv-dropdown-menu-shortcut>⌘N</iv-dropdown-menu-shortcut></iv-dropdown-menu-item>
          <iv-dropdown-menu-separator />
          <iv-dropdown-menu-item>Print…<iv-dropdown-menu-shortcut>⌘P</iv-dropdown-menu-shortcut></iv-dropdown-menu-item>
        </iv-dropdown-menu-content>
      </iv-menubar-menu>
      <iv-menubar-menu>
        <button ivMenubarTrigger>Edit</button>
        <iv-dropdown-menu-content>
          <iv-dropdown-menu-item>Undo<iv-dropdown-menu-shortcut>⌘Z</iv-dropdown-menu-shortcut></iv-dropdown-menu-item>
          <iv-dropdown-menu-item>Redo<iv-dropdown-menu-shortcut>⇧⌘Z</iv-dropdown-menu-shortcut></iv-dropdown-menu-item>
        </iv-dropdown-menu-content>
      </iv-menubar-menu>
      <iv-menubar-menu>
        <button ivMenubarTrigger>View</button>
        <iv-dropdown-menu-content>
          <iv-dropdown-menu-checkbox-item [checked]="true">Show sidebar</iv-dropdown-menu-checkbox-item>
          <iv-dropdown-menu-checkbox-item>Show status bar</iv-dropdown-menu-checkbox-item>
        </iv-dropdown-menu-content>
      </iv-menubar-menu>
    </iv-menubar>
  `,
})
export default class MenubarDemo {}

Installation

CLInpm
npx ivorie add menubar

Each menu uses the Dropdown Menu parts. IV_MENUBAR_IMPORTS includes them.

Usage

import { IV_MENUBAR_IMPORTS } from '@inlaylab/ivorie/menubar';
<iv-menubar>
  <iv-menubar-menu>
    <button ivMenubarTrigger>File</button>
    <iv-dropdown-menu-content>
      <iv-dropdown-menu-item>New tab</iv-dropdown-menu-item>
    </iv-dropdown-menu-content>
  </iv-menubar-menu>
</iv-menubar>

API

Every part also accepts class.

  • iv-menubar: the bar.
  • iv-menubar-menu: one menu.
  • button[ivMenubarTrigger]: opens its menu.

Content and items: see Dropdown Menu.

Accessibility

  • The bar is role="menubar"; triggers are role="menuitem" with one tab stop.
  • Left and Right move between triggers, and between menus when one is open.
  • Down, Enter or Space opens a menu at its first item. Once a menu is open, hovering another trigger switches to it.