npm i @velkin/react
import { VuNavPanel } from "@velkin/react/nav-panel";| Prop | Type | Default | Description |
|---|---|---|---|
| items | VuNavPanelItem[] | [] | Rows to render; 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; labels and group headings 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 heading row of a category. |
| 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. |
| fallback | Initial in icon rail when the row has no icon. |
| 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 |
|---|---|
| |
| |
| |
| |
| |
|