# Navigation
Use when you move around or structure a flow.
## Index
- [`mega-menu`](#mega-menu) — Horizontal nav with large multi-column panels
- [`nav`](#nav) — Collapsible sidebar navigation with submenus and mini mode
- [`pagination`](#pagination) — Page navigation with ellipsis and prev/next
- [`stepper`](#stepper) — Multi-step wizard with linear/non-linear navigation
- [`tabs`](#tabs) — Tabbed navigation with roving tabindex and arrow keys
---
## mega-menu
Horizontal nav bar where each top-level trigger opens a large multi-column
panel. Opens on hover/focus/click, closes on Escape / outside-click /
focus-leave, with arrow-key navigation between triggers (disclosure-menu ARIA
pattern). Triggers without a panel act as plain links.
```html
```
```ts
import { MegaMenu } from '@42/core/mega-menu';
const menu = new MegaMenu(root, { openOnHover: true, closeDelay: 150 });
menu.open('products');
```
Keyboard: Left/Right + Home/End move between triggers, ArrowDown opens + enters the panel, Escape closes.
Options: `openOnHover` (default true), `openDelay` (default 0), `closeDelay` (default 150)
Methods: `open(v)`, `toggle(v)`, `closeAll()`, `openValue`
Events: `megamenu:open` → `{ value }`, `megamenu:close` → `{ value }`
---
## 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
```
```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 }`
---
## pagination
Page navigation that renders page buttons with ellipsis. Prev/next, `aria-current`.
```html
```
```ts
import { Pagination } from '@42/core/pagination';
const p = new Pagination(root, { total: 20, page: 1, siblingCount: 1, boundaryCount: 1 });
p.next();
```
Options: `total` (required), `page`, `siblingCount`, `boundaryCount`
Methods: `setPage(n)`, `next()`, `prev()`
Events: `pagination:change` → `{ page: number }`
---
## stepper
Multi-step wizard with linear/non-linear navigation.
```html
Content for step 1
Content for step 2
```
```ts
import { Stepper } from '@42/core/stepper';
const s = new Stepper(root, { linear: true });
s.next(); s.prev(); s.goTo('2');
```
Options: `linear`, `defaultValue`
Events: `stepper:change` → `{ value, index }`
---
## tabs
Tabbed navigation with `tablist`/`tab`/`tabpanel` ARIA, roving tabindex, arrow-key nav.
```html
```
```ts
import { Tabs } from '@42/core/tabs';
new Tabs(root, { orientation: 'horizontal', activationMode: 'automatic', defaultValue: 'a' });
```
Options: `orientation` ('horizontal'|'vertical'), `activationMode` ('automatic'|'manual'), `defaultValue`
Events: `tabs:change` → `{ value: string }`