Menubar

Persistent application menu built on dropdown-menu primitives with groups, checkbox and radio items, submenus, shortcuts, icons, and RTL support.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

import { FrMenubarModule } from '@frame-ui-ng/components/menubar';

HTML

<div frMenuBar>
  <div frMenuBarMenu>
    <button [frMenuBarTrigger]="fileMenu" type="button">File</button>

    <ng-template #fileMenu="frMenuBarContent" frMenuBarContent>
      <div frMenuBarPanel>
        <button frMenuBarItem type="button">
          New Tab
          <span frMenuBarShortcut>⌘T</span>
        </button>
        <button frMenuBarItem type="button">New Window</button>
        <div frMenuBarSeparator></div>
        <button frMenuBarItem type="button">Share</button>
        <button frMenuBarItem type="button">
          Print
          <span frMenuBarShortcut>⌘P</span>
        </button>
      </div>
    </ng-template>
  </div>
</div>

03 Examples

Basic

Use menubar menus for persistent desktop-style command groups such as File, Edit, View, and Profiles.

Component Sheet

Grid: 8px · Scale: 1:1

Checkbox

Use checkbox items for independent view or formatting toggles.

Component Sheet

Grid: 8px · Scale: 1:1

Radio

Use radio groups for exclusive selections such as profiles or themes.

Component Sheet

Grid: 8px · Scale: 1:1

Submenu

Use submenus for nested command branches that should stay attached to the active menubar panel.

Component Sheet

Grid: 8px · Scale: 1:1

With Icons

Add icons to menu rows when the actions benefit from fast scanning.

Component Sheet

Grid: 8px · Scale: 1:1

RTL support

Menubar triggers and overlay content inherit document direction and support aligned RTL panels.

Component Sheet

Grid: 8px · Scale: 1:1

04 Custom Styling

Override menubar tokens for the persistent shell and trigger state, and dropdown-menu tokens for the opened panels.

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

Inspect the menubar shell and trigger tokens alongside the inherited dropdown-menu panel and item tokens.

06 Design Tokens

Menubar defines tokens for the persistent horizontal shell and trigger states. Opened panels intentionally reuse the dropdown-menu token contract.

SCSS


  --frame-menubar-bg: var(--frame-surface);
  --frame-menubar-color: var(--frame-surface-foreground);
  --frame-menubar-border: var(--frame-border);
  --frame-menubar-radius: var(--frame-radius-md);
  --frame-menubar-padding: 0.25rem;
  --frame-menubar-gap: 0.25rem;
  --frame-menubar-shadow: var(--frame-shadow-sm);
  --frame-menubar-trigger-height: 2rem;
  --frame-menubar-trigger-padding-x: 0.75rem;
  --frame-menubar-trigger-gap: 0.375rem;
  --frame-menubar-trigger-radius: var(--frame-radius-sm);
  --frame-menubar-trigger-font-size: 0.875rem;
  --frame-menubar-trigger-font-weight: 500;
  --frame-menubar-trigger-bg: transparent;
  --frame-menubar-trigger-color: var(--frame-menubar-color);
  --frame-menubar-trigger-hover-bg: color-mix(in srgb, var(--frame-accent) 48%, transparent);
  --frame-menubar-trigger-hover-color: var(--frame-menubar-color);
  --frame-menubar-trigger-open-bg: var(--frame-accent);
  --frame-menubar-trigger-open-color: var(--frame-accent-foreground);
  --frame-menubar-trigger-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);