Skip to content
Ordermatic Docs

Navigation & layout

The page-scaffolding primitives. PageHeader, Eyebrow, Breadcrumbs, and Divider are presentational (render server-side). Tabs and Pagination are interactive islands.

Section titled “PageHeader”

Inbox

Order intake

Triage incoming purchase orders and route them for review.

import { PageHeader } from '@repo/ui/nav';


<PageHeader eyebrow="Inbox" title="Order intake" description="…" actions={<Button>New</Button>} />

Orange Eyebrow, ink title, muted description, optional right-aligned actions. Use Eyebrow on its own for the all-caps tracked label anywhere.

Section titled “Breadcrumbs”

items: { label, href? }[] — the last is the current page (aria-current="page"); earlier items link.

Tabs & Pagination

Section titled “Tabs & Pagination”

12 orders in progress.
  • Tabs — tabs: { id, label, content }[], controlled (value) or uncontrolled (defaultValue). Radix-backed: roving tabindex, arrow-key nav, ARIA tablist/tab/tabpanel. Active tab carries the orange underline.
  • Pagination — page, totalPages, onPageChange, siblingCount?. Ellipsis gaps, disabled ends, aria-current on the active page.

AppShell & RailNav

Section titled “AppShell & RailNav”

The cockpit frame: a dark RailNav (icon strip, tooltips when collapsed, orange active state) on the left, a bright workspace on the right via AppShell. Click a rail icon to switch.

inbox

Order intake

Triage incoming orders and route them for review.

Today
128
+12%
Errors
0.4%
-0.2pt
Awaiting
9
review
 
import { AppShell, RailNav } from '@repo/ui/nav';


<AppShell sidebar={
  <RailNav activeId={route} logo={<Logo/>} footer={<UserMenu/>} items={[
    { id: 'inbox', label: 'Inbox', href: '/inbox', icon: <InboxIcon className="h-5 w-5" /> },
  ]} />
}>
  {pageContent}
</AppShell>

RailNav is always a dark surface; pass expanded to show labels (224px) instead of the 56px icon strip. Icon-only items get an aria-label + a Tooltip.

Divider

Section titled “Divider”

Above

Below

orientation (horizontal|vertical), decorative (default true). On Radix Separator.

Accessibility

Section titled “Accessibility”
  • Breadcrumbs/Pagination are landmark navs with labels; Tabs uses the full ARIA tab pattern via Radix. Verified with jest-axe; the pagination ellipsis algorithm is unit-tested.