# Sidebar

> Data-driven nav with flat links and expandable groups. Active route auto-expands its containing group. Icons, trailing badges, and disabled state all opt-in per entry.

Source: https://ngwr.dev/reference/components/sidebar  
Kind: Component, Standalone

## Installation

```angular-ts
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'] },
      ],
    },
  ];
}
```

## Basic usage

Pass `[entries]` — either `WrSidebarItem` (direct link) or `WrSidebarGroup` (expand to reveal children). Badges accept any string.

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

## API

| 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` | `—` |