Navigation

Menubar

Themed desktop-style application menubar with arrow-key navigation and dropdown submenus.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjMenubarComponent } from '@kouji-ui/components';
04

Playground

#playground

Last selected: —

items
<kj-menubar
  kjAriaLabel="Application"
>
  <kj-menubar-item (kjActivate)="lastSelected.set('File')">File</kj-menubar-item>
  <kj-menubar-item (kjActivate)="lastSelected.set('Edit')">Edit</kj-menubar-item>
  <kj-menubar-item (kjActivate)="lastSelected.set('View')">View</kj-menubar-item>
  <kj-menubar-item [kjDisabled]="true" (kjActivate)="lastSelected.set('Help')">Help</kj-menubar-item>
</kj-menubar>

<p>Last selected: <strong>{{ lastSelected() ?? '—' }}</strong></p>