Overlay

Dropdown menu

Dropdown menu suite. Compose `[kjDropdownMenuTrigger]` + `<kj-dropdown-menu-content [kjFor]="t">` with `[kjDropdownMenuItem]` rows, `[kjDropdownMenuSeparator]` dividers, and `[kjDropdownMenuLabel]` headings. The wrapper itself only projects content — its purpose is to host the documentation page for the suite.

03

Import

#import

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

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

Playground

#playground

Last selected: —

items
<kj-button kjDropdownMenuTrigger #t="kjDropdownMenuTrigger">Open menu</kj-button>
<kj-dropdown-menu-content [kjFor]="t">
  <button kjDropdownMenuItem (kjSelect)="lastSelected.set('Profile')">Profile</button>
  <div kjDropdownMenuSeparator></div>
  <button kjDropdownMenuItem (kjSelect)="lastSelected.set('Settings')">Settings</button>
  <button kjDropdownMenuItem (kjSelect)="lastSelected.set('Team')">Team</button>
  <button kjDropdownMenuItem (kjSelect)="lastSelected.set('Logout')">Logout</button>
</kj-dropdown-menu-content>

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