---
name: nav
category: navigation
summary: "Collapsible sidebar navigation with submenus and mini mode"
subpath: "@42/core/nav"
---

Collapsible sidebar navigation (WAI-ARIA disclosure pattern): groups with
`aria-expanded` submenus, an active item (`aria-current="page"`), and an
optional collapsed/mini mode. Reflects `data-state` / `data-active` /
`data-collapsed`.

```html
<nav data-c42-nav aria-label="Main">
  <button data-c42-nav-collapse aria-label="Collapse"></button>
  <ul>
    <li><a data-c42-nav-item href="/" data-value="home">Home</a></li>
    <li data-c42-nav-group>
      <button data-c42-nav-trigger data-value="settings">Settings</button>
      <ul data-c42-nav-submenu>
        <li><a data-c42-nav-item href="/p" data-value="profile">Profile</a></li>
      </ul>
    </li>
  </ul>
</nav>
```

```ts
import { Nav } from '@42/core/nav';
const nav = new Nav(root, { defaultActive: 'profile', accordion: false });
nav.toggleCollapsed();
```

Options: `defaultActive`, `accordion` (default false), `collapsed` (default false)
Methods: `toggleGroup(v)`, `openGroup(v)`, `closeGroup(v)`, `setActive(v)`, `toggleCollapsed()`, `setCollapsed(bool)`
Events: `nav:toggle` → `{ value, open }`, `nav:select` → `{ value }`, `nav:collapse` → `{ collapsed }`