Navigation
How people move around a Buildpad app: between sections of a record, through pages of a list, along a multi-step flow and across the sidebar. Ember marks where you are (the active tab underline, the active nav wash, the current page); ink stays the text colour.
Tabs
Switch between views of the same record. Icons go in leftSection, counters in rightSection.
PO-2041 · Atlas Packaging · $12,840
variant="default" — the record-page tabs. Active tab is ink text on an ember underline (--ds-primary-600); hover tints --ds-gray-100. “Audit log” is disabled.PO-2041 · Atlas Packaging · $12,840
variant="outline" — the active tab joins the panel with a hairline border; use it above a bordered surface.PO-2041 · Atlas Packaging · $12,840
variant="pills" — the active pill fills with the primary (ember) colour and keeps the ink label set in globals.css. Counters are Badge size="xs" circle in rightSection.PO-2041 · Atlas Packaging · $12,840
Tabs.List grow — tabs share the full width, e.g. in a drawer or narrow card.Vertical tabs
Settings-style navigation with many sections, on either side of the panel.
PO-2041 · Atlas Packaging · $12,840
orientation="vertical" — the underline moves to the inner edge. Good for settings pages with many sections.PO-2041 · Atlas Packaging · $12,840
placement="right" — tab list on the right of the panel, indicator on its left edge.PO-2041 · Atlas Packaging · $12,840
variant="pills" orientation="vertical".Breadcrumbs
Show where a record sits; every ancestor is a link, the current page is not.
Anchors (--ds-accent-text); the current page is plain Text fw=500 with aria-current.separator={<IconChevronRight />} with separatorMargin="xs"; the root is an icon-only link with an aria-label.AuthenticatedShell) uses dimmed Text crumbs with a slash and a semibold current title.Pagination
Page through lists. Under tables, use the list footer so the count and page size travel with it.
Pagination total={10} — the active page fills with the primary colour; controls use radius="sm" (8px).xs
sm
md
size="xs" | "sm" | "md" — use xs/sm in dense tables and cards.withEdges adds first / last controls.siblings={2} boundaries={2} on 40 pages — more context around the current page for long result sets.disabled — e.g. while a page of rows is loading.1–20 of 128
Pagination.Root with Previous and Next — the compact “1–20 of 128” footer for cards and side panels.ListFooter the CLI managers render under a table: “Showing N of M”, a page-size Select size="xs" and Pagination, separated by --ds-table-border.Stepper
Multi-step flows such as approvals, imports and onboarding.
onStepClick) — try Back / Next.color="red" (→ danger) with completedIcon={<IconX />}. The step in progress has loading.orientation="vertical" — order timelines and onboarding checklists.size="xs" vertical — an onboarding checklist in a side panel.size="xs" with iconSize={28} and no descriptions — fits a modal header or wizard footer.NavLink
Mantine’s NavLink for in-page and secondary navigation: nested groups, descriptions, badges.
leftSection icon, rightSection badge, and a nested group via children (defaultOpened). The active link is the default variant="light" — ember wash, 700 text. Click to move it.variant="light", "filled" and "subtle"; description adds a dimmed second line; a status badge uses color="red" (→ danger); “Archive” is a collapsed group.Sidebar
The app shell’s own navigation, built from the shipped .bp-nav-link classes rather than NavLink.
.bp-navbar + .bp-nav-link from the shipped globals.css, fed by navigation.ts. Section labels are xs uppercase dimmed text. Click a link to make it active.--ds-ink-secondary text. Hover: --ds-gray-100 fill, ink text. Active (.bp-nav-link-active): --ds-primary-50 wash, inset --ds-primary-200 ring, semibold ink text, ember icon, filled count badge. Plus .bp-header-user-button, .bp-search-button and .bp-notification-dot.Anchor
Text links. They use the AA-safe ember text stop and underline on hover by default.
underline="hover" is the theme default; "always" and "never" are opt-in. Colour is --ds-accent-text (AA burnt ember).inherit; external links pair an icon with target="_blank".Burger
Opens the navigation on small screens.
opened morphs to a close icon. size="sm" | "md" | "lg"; always pass an aria-label.sm breakpoint the shell hides the sidebar and shows a Burger size="sm" in the header.Table of contents
A scroll-spy outline for long records and documents.
TableOfContents reads headings with scrollSpyOptions.selector and highlights the active one; variant="filled" | "light" | "none". Scroll the contract or click an entry.