# Core/VerticalNavigation - Design

Vertical navigation shell with controlled and uncontrolled collapse support. Provides shared context for items, collapse toggle, and footer sections.

## Properties

### Layout

VerticalNavigation consists of a list of items and an optional footer. It is typically placed on the left side of the screen.
It supports a collapsed state to save space.

### Items

Navigation items can have icons and labels. Sub-items are indented and do not have icons.
Items can be links (using `href`) or buttons (using `onClick`).

## Accessibility

### Keyboard interaction

| Key                 | Function                                                                     |
| ------------------- | ---------------------------------------------------------------------------- |
| `Tab` / `Shift-Tab` | Moves focus through the interactive items (links, buttons, collapse toggle). |
| `Enter` / `Space`   | Activates the focused item (follows link or triggers action).                |

### WAI-ARIA Roles, States, and Properties

* The navigation container has `role="navigation"` (implicit for `<nav>`).
* The `aria-label` provides a descriptive name for the navigation region (default: "Cribl product navigation").
* The collapse toggle has `aria-expanded` reflecting the collapsed state.
* Active items use `aria-current="page"` to indicate the current page.