# SvNavPane
An Outlook-style navigation pane: collapsible sections, items with icons and
badge counts, one level of nested sub-items, and an optional bottom module strip.
`SvNavPane` is the app-shell sidebar. Sections group items and can collapse;
items carry an icon, a badge (unread counts), and optionally one level of
children. It supports a single-select highlight, arrow-key navigation, an
icon-only `collapsed` rail, and RTL. The bottom `modules` strip reproduces
Outlook's Mail / Calendar / People switch, complete with a drag splitter that
moves modules between full rows and an icon rail. Colors come from the `--sg-*`
tokens.
Related: [SvTree](https://svgrid.com/docs/help/ui-components/sv-tree/) · [SvBreadcrumb](https://svgrid.com/docs/help/ui-components/sv-breadcrumb/) · [Navigation & rich overview](https://svgrid.com/docs/help/ui-components/navigation/)
## Installation
Add it with the CLI - this drops a ready-to-edit `SvNavPane` starter into your app:
Prefer to see it first? `npx @svgrid/ui try nav-pane` opens it in a throwaway sandbox - no project needed.
Or install the package and import it directly. `SvNavPane` ships free in
`@svgrid/grid` (dependency-free):
The examples on this page import from `@svgrid/grid`:
```svelte
```
```ts
import { SvNavPane } from '@svgrid/grid'
```
## Example
> Live demo: Navigation pane - https://svgrid.com/demos/327-navpane/
```svelte
load(id)} />
```
## Props
| Prop | Type | Default | Description |
| ------------------ | ------------------------------- | -------------- | ---------------------------------------------------------------- |
| `sections` | `ReadonlyArray` | - | The grouped navigation items. |
| `value` | `string \| null` | `null` | Selected item id (bindable). |
| `onSelect` | `(id: string) => void` | - | Fires when a leaf item is chosen. |
| `expandedSections` | `string[]` | all open | Open section ids (bindable). Default opens every section. |
| `expandedItems` | `string[]` | `[]` | Open nested-item ids (bindable). |
| `collapsed` | `boolean` | `false` | Icon-only rail; labels and badges hidden. |
| `ariaLabel` | `string` | `Navigation` | Accessible name for the `