# Side Nav Section

## Usage

Section grouping with an optional title, subtitle, and end content.

A section is a named group of `SideNavItem` elements. `subtitle` adds a second, smaller line under the title, and `end` sits at the trailing edge of the header row. While the rail is collapsed the header is only hidden visually, so screen readers still hear the group name. `isHeaderHidden` hides it at any width.

```ts
import { SideNavSection } from '@astryx-vue/core/SideNav'
```

## Examples

Common configurations, variations, and states.

### Basic

Group related SideNavItems under titled sections. Use sections to organize longer navigation lists into scannable clusters like Overview and Account.

```vue
<script setup lang="ts">
import { SideNav, SideNavItem, SideNavSection } from '@astryx-vue/core/SideNav'
</script>

<template>
  <SideNav>
    <SideNavSection title="Overview">
      <SideNavItem href="#dashboard" icon-class="i-carbon-dashboard" is-selected label="Dashboard" />
      <SideNavItem href="#analytics" icon-class="i-carbon-chart-line" label="Analytics" />
    </SideNavSection>
    <SideNavSection title="Account">
      <SideNavItem href="#profile" icon-class="i-carbon-user" label="Profile" />
    </SideNavSection>
  </SideNav>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | — | Group name. Hidden visually while the rail is collapsed, and still read by screen readers. Required. |
| `subtitle` | `string` | — | Second, smaller line under the title. |
| `isHeaderHidden` | `boolean` | `false` | Hides the header at any width. It stays available to screen readers. |

## Slots

- `default`: the items of the section.
- `end`: content at the trailing edge of the header row, such as an add button.