Sidebar

import { WrSidebar } from 'ngwr/sidebar';

@Component({ imports: [WrSidebar] })
export class MyComponent {
  protected readonly entries: WrSidebarEntry[] = [
    { title: 'Dashboard', icon: 'home', url: ['/dashboard'] },
    {
      title: 'Settings',
      icon: 'cog',
      children: [
        { title: 'Profile', url: ['/settings', 'profile'] },
        { title: 'Billing', url: ['/settings', 'billing'] },
      ],
    },
  ];
}

<wr-sidebar [entries]="entries" />

Name	Description	Type	Default
`entries`	Flat items + expandable groups. Order preserved.	`readonly WrSidebarEntry[]`	`[]`
`ariaLabel`	Accessible name for the navigation landmark. Falls back to the `sidebar.label` catalog key.	`string \| null`	`null`
`defaultGroupIcon`	Icon shown when a group's `icon` is omitted.	`string`	`'folder'`
`defaultItemIcon`	Icon shown when an item's `icon` is omitted.	`string`	`'caret-forward'`
`autoExpand`	Auto-expand the group containing the active route on navigation.	`boolean`	`true`
`WrSidebarItem`	`{ title, url, icon?, badge?, disabled? }` — a direct-link entry.	`interface`	`—`
`WrSidebarGroup`	`{ title, children, icon?, defaultOpen? }` — expand to reveal child items.	`interface`	`—`

Installation

Basic usage

API