@kit-ng-ui/menu

Data-driven navigation menu — horizontal, vertical, and inline modes with one-level submenus, selection, and a dark theme variant.

Install

pnpm add @kit-ng-ui/menu

@use '@kit-ng-ui/menu/styles' as menu;

Usage

items: KitMenuItem[] = [
  { key: 'home', label: 'Home', path: '/' },
  {
    key: 'settings',
    label: 'Settings',
    children: [
      { key: 'profile', label: 'Profile', path: '/settings/profile' },
      { key: 'security', label: 'Security', path: '/settings/security' },
    ],
  },
];

<kit-menu
  mode="inline"
  [items]="items"
  [(selectedKeys)]="selected"
  [(openKeys)]="open"
  (itemClick)="onPick($event)"
></kit-menu>

API

<kit-menu>

| Input | Type | Default | Description | | -------------- | ------------------------------------- | -------------- | ------------------------------------------ | | items | ReadonlyArray<KitMenuItem> | [] | Menu entries. | | mode | 'horizontal' \| 'vertical' \| 'inline' | 'vertical' | Layout / orientation. | | theme | 'light' \| 'dark' | 'light' | Surface colour variant. | | selectable | boolean | true | Update selectedKeys on click. | | multiple | boolean | false | Toggle multiple selection. | | selectedKeys | ReadonlyArray<string> (two-way) | [] | Currently selected item keys. | | openKeys | ReadonlyArray<string> (two-way) | [] | Currently expanded submenu keys. |

| Output | Payload | Description | | -------------- | ------------------------ | -------------------------------------------- | | itemClick | KitMenuItem | Fires before selection state updates. | | openChange | ReadonlyArray<string> | Fires when an open/close transition runs. | | selectChange | ReadonlyArray<string> | Fires when selection actually changes. |