<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->

# Sidebar

Provides responsive side navigation.

```html
<noora-sidebar>
  <noora-sidebar-item href="/" icon="dashboard">Dashboard</noora-sidebar-item>
</noora-sidebar>
```

## Attributes

| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Primary navigation"` | Sets the accessible navigation label. |

## Properties

| Property | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `items` | `Array<Record<string, unknown>>` | `[]` | Defines navigation programmatically when declarative sidebar children are not used. |

## Slots

| Slot | Description |
| --- | --- |
| `default` | Declarative noora-sidebar-item and noora-sidebar-group children. |

## Styling parts

| Part | Description |
| --- | --- |
| `sidebar` | The sidebar container. |
| `viewport` | The scrollable navigation viewport. |



## Navigation

Provide structured navigation items.

```html
<noora-sidebar>
  <noora-sidebar-item href="/" icon="dashboard" selected>Dashboard</noora-sidebar-item>
  <noora-sidebar-group label="Projects" default-open>
    <noora-sidebar-item href="/projects/tuist">Tuist</noora-sidebar-item>
    <noora-sidebar-item href="/projects/noora">Noora</noora-sidebar-item>
  </noora-sidebar-group>
</noora-sidebar>
```
