Navigation

Wayfinding components for admin apps and Studio-generated screens. Pure, keyboard-accessible, theme-token driven.

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.

<SvBreadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Orders', href: '/orders' },
  { label: '#1024' },
]} />

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.

<SvPagination page={p} pageCount={20} onChange={(n) => (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.

<SvStepper steps={[
  { label: 'Cart' },
  { label: 'Shipping', description: 'Where to send it' },
  { label: 'Payment', optional: true },
]} current={i} onChange={(n) => (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: