# NavLink (/docs/nav-link) `NavLink` is a single sidebar/nav row — leading `startSlot`, `label`, trailing `endSlot`, current-page treatment, and self-nesting via `children` for arbitrary-depth sub-navigation. `Navigation` is the `data`-driven convenience wrapper over it (same relationship as [`Menu`](/docs/menu)'s `data` form to its compound parts). Both are router-agnostic: pass whatever the target link needs as `linkOptions` — a plain `{ href }` for a bare ``, or a framework router's own shape — and it's spread onto whatever renders the link. See [Router links](#router-links) below for how that resolves without either component ever importing a router package. ```tsx import { Navigation } from "@42-central/ui-react/nav-link"; ; ``` ## Basic [#basic] The `data` form is the quickest way to use it — pass an array of entries. An entry with `items` renders as an expandable row; everything else renders as a link (or plain text, with no `linkOptions`). ## Trailing slot [#trailing-slot] `endSlot` renders at the far trailing edge of the row — `label` fills the remaining space in between, so it stays flush right regardless of how long the label is. Use it for a count, a status badge, anything that isn't the primary click target. ## Nesting [#nesting] `items` is recursive — an item's own `items` can themselves have `items`, to any depth. A row with no `linkOptions` (a pure category heading) renders as a toggle button rather than a link. A row that's both a link and expandable (has `linkOptions` *and* `items`) renders the link and its expand/collapse toggle as two independent controls, side by side — nesting one interactive element inside another (an `` inside a `