# Navigation Wayfinding components for admin apps and Studio-generated screens. Pure, keyboard-accessible, theme-token driven. ## Installation Add any component with the CLI (drops a ready-to-edit starter into your app) - or add the whole family at once:

Prefer to see them first? `npx @svgrid/ui try navigation` opens the whole family in a sandbox - no project needed. They all ship free in the `@svgrid/grid` package, so you can also install it and import them directly:

## SvBreadcrumb A navigation trail. Each item is a link (`href`), a button (`onClick`), or plain text; the last item is the current page and is never interactive. Long trails collapse the middle to an expandable ellipsis. The examples on this page import from `@svgrid/grid`: ```svelte ``` ```svelte ``` Props: `items` (`BreadcrumbItem[]`), `separator`, `maxItems` (collapse when exceeded), `ariaLabel`. `BreadcrumbItem`: `{ label, href?, onClick?, icon? }`. ## SvPagination A standalone pager: page numbers with ellipsis plus prev/next and optional first/last. The page-range math lives in the pure `paginationRange` helper. ```svelte (p = n)} showFirstLast /> ``` Props: `page` (1-based), `pageCount`, `onChange(page)`, `siblingCount`, `boundaryCount`, `showFirstLast`, `showPrevNext`, `size` (`sm` | `md` | `lg`), `disabled`, `ariaLabel`. `paginationRange({ page, pageCount, siblingCount?, boundaryCount? })` returns the `(number | 'ellipsis-left' | 'ellipsis-right')[]` sequence and is exported for custom pagers. ## SvStepper A progress stepper for wizards / multi-step forms: completed, active and upcoming steps, horizontal or vertical. In `linear` mode only reached steps are clickable. ```svelte (i = n)} /> ``` Props: `steps` (`StepItem[]`), `current` (0-based), `onChange(index)`, `linear`, `orientation` (`horizontal` | `vertical`). `StepItem`: `{ label, description?, optional? }`. ## Component guides Each component has its own full tutorial with props, keyboard behaviour and recipes: - [SvBreadcrumb](https://svgrid.com/docs/help/ui-components/sv-breadcrumb/) - a collapsing navigation trail. - [SvPagination](https://svgrid.com/docs/help/ui-components/sv-pagination/) - a standalone page-number pager. - [SvStepper](https://svgrid.com/docs/help/ui-components/sv-stepper/) - a progress stepper for wizards. - [SvNavPane](https://svgrid.com/docs/help/ui-components/sv-nav-pane/) - an Outlook-style app-shell sidebar. - [SvTree](https://svgrid.com/docs/help/ui-components/sv-tree/) - a WAI-ARIA tree view with checkboxes. - [SvCommand](https://svgrid.com/docs/help/ui-components/sv-command/) - a Cmd+K fuzzy command palette. - [SvTour](https://svgrid.com/docs/help/ui-components/sv-tour/) - a guided, spotlighted product tour. - [SvRichText](https://svgrid.com/docs/help/ui-components/sv-rich-text/) - a lightweight WYSIWYG HTML editor. --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/ui-components/navigation/ . All docs: https://svgrid.com/llms.txt