Skip to content
quartiledocsv0.1
GitHub

Navigation

Preview

Navigation primitives for moving between reports, pages and sections.

Usage

<Breadcrumbs items={[
  { label: 'Reports', href: '/reports' },
  { label: 'Revenue' },
]} />

<Pills label="Period" value={period} onChange={setPeriod} items={[
  { value: 'week', label: 'Week' },
  { value: 'month', label: 'Month' },
]} />

<Pagination page={page} pageCount={12} onChange={setPage} />

Pagination exposes a page number; the application owns fetching or slicing the page. Use links for navigation and buttons for local actions. Give each navigation region a distinct label.

Pagination

PropTypeDefaultDescription
pagenumber—Current page, 1-based.
defaultPagenumber1—
pageCountrequirednumber——
onChange(page: number) => void——
siblingsnumber1Pages shown on each side of the current one (default 1).
boundariesnumber1Pages always shown at each end (default 1).
variant'pages' | 'compact''pages'pages shows numbered buttons; compact shows Previous / Page n of N / Next.

Also accepts the props of Omit<HTMLAttributes<HTMLElement>, 'onChange'>, spread onto the root element.

Pills

PropTypeDefaultDescription
itemsrequiredPillItem[]——
valuestring——
defaultValuestring——
onChange(value: string) => void——
labelstring—Names the group for assistive technology.
size'sm' | 'md''md'—

Also accepts the props of Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, spread onto the root element.

SidebarHeader

PropTypeDefaultDescription
titlerequiredReactNode——
subtitleReactNode——
logoReactNode—A 28px mark; pass a letter for an ink tile, or any node.
onClick(event: MouseEvent<HTMLElement>) => void—Makes the header a button (workspace switcher) with an up-down chevron.
trailingReactNode—Replaces the chevron.

Also accepts the props of Omit<HTMLAttributes<HTMLElement>, 'title'>, spread onto the root element.

SidebarItem

PropTypeDefaultDescription
labelrequiredReactNode——
iconReactNode—16px icon; without one, a small square marker is shown.
countReactNode—Quiet mono count at the end (Reports 12).
badgeReactNode—Signal pill at the end for things that need attention (Alerts 3).
activeboolean—The current page: white, raised, hairline ring; aria-current="page".
hrefstring—Renders a link; otherwise a button.
onClick(event: MouseEvent<HTMLElement>) => void——
disabledboolean——

Also accepts the props of Omit<HTMLAttributes<HTMLElement>, 'onClick'>, spread onto the root element.

SidebarSearch

PropTypeDefaultDescription
labelReactNode'Search'—
shortcutReactNode'⌘K'Keyboard hint at the end (default ⌘K). Pass null to hide.

Also accepts the props of ButtonHTMLAttributes<HTMLButtonElement>, spread onto the root element.

SidebarSection

PropTypeDefaultDescription
titleReactNode—Mono uppercase heading: Analytics, Workspace.
childrenReactNode——

Also accepts the props of Omit<HTMLAttributes<HTMLDivElement>, 'title'>, spread onto the root element.

Report an issueBuilt Oct 21, 2026