npm i @velkin/react
import { VuNavPanel } from "@velkin/react/nav-panel";| Prop | Type | Default | Description |
|---|---|---|---|
| items | VuNavPanelItem[] | [] | Rows to render; `kind` may be `header`/`divider`/`checkbox`/`radio`; shared `category` values create collapsible groups. |
| value | string | "" | Currently selected row key. |
| collapsedGroups | Record | {} | Group collapsed-state map (`true` means collapsed). |
| collapsed | boolean | false | Icon-rail mode; icon and checkable rows remain (headers, dividers, and group collapse triggers are hidden). |
| label | string | "Navigation" | Accessible name for the listbox. |
| size | VuNavPanelSize | "md" | Row density (`sm`, `md`, `lg`); relayed to rail tooltips. |
| color | VuNavPanelColor | "default" | Active-row accent color. |
| collapsedHints | VuNavPanelCollapsedHints | "tooltip" | Icon-rail label reveal: per-row `vu-tooltip`, native `title`, or `none`. |
| collapsedHintPlacement | VuNavPanelHintPlacement | "right" | Hint side for rail rows when `collapsedHints="tooltip"`. |
| Event | Detail | Description |
|---|---|---|
| vu-change | VuNavPanelChangeDetail | When the selected row changes. |
| vu-collapse-change | VuNavPanelCollapseChangeDetail | When icon-rail `collapsed` flips. |
| Slot | Description |
|---|---|
| prepend | Content before rows inside the list body. |
| append | Content after rows inside the list body. |
| Part | Description |
|---|---|
| panel | Root list region. |
| body | Scrollable container for rows and groups. |
| prepend | Prepend slot wrapper. |
| append | Append slot wrapper. |
| list | Flat list container when items have no categories. |
| group | Wrapper for a category section. |
| heading | Clickable collapsible heading for a `category` group (hidden in icon rail). |
| header | Static section label from `kind="header"` items (hidden in icon rail). |
| divider | Separator row from `kind="divider"` items (hidden in icon rail). |
| state | Leading checkbox/radio cell for `kind="checkbox"` / `kind="radio"`. |
| chevron | Chevron icon in the heading. |
| group-content | Container of rows inside a category. |
| row | A single selectable row (`button` or `a`). |
| stack | Label and description column inside a row. |
| label | Primary row text. |
| description | Secondary row text. |
| badge | Optional trailing meta on a row. |
| icon | Leading or trailing icon on a row. |
| collapsed-hint | Per-row tooltip bubble when `collapsedHints="tooltip"` (`exportparts` from `<vu-tooltip>`). |
| Method | Description |
|---|---|
| select | - Sets the selected row by `value`. |
| collapse | - Collapses to the icon rail. |
| expand | - Expands from the icon rail. |
| toggleCollapse | - Toggles icon-rail mode. |
| toggleGroup | - Toggles or forces a group collapsed state. |
| expandAllGroups | - Expands all known groups. |
| collapseAllGroups | - Collapses all known groups. |
| Name | Definition |
|---|---|
| |
| |
| |
| |
| |
|