II · Components / 10
Navigation
Every part the site is built from, live, in both themes.
Navigation#
You always know where you are: the teal gem marks the current place in every list of places, from the header to the guide’s own route.
Scroll up: the header is the real component. The gem under a link marks the current place; the character chip carries your level and class to every page.
Use
The lockup, seven places, one search, the character you are planning for, and the theme. It is live at the top of this page; on phones the places move into a sheet.
Use
On every record and guide page, above the title. Bronze waypoints between steps.
Use
The database’s own sections, under the header, scrolling sideways on phones.
- Kind
- Dungeon
- Players
- 10
- Bosses
- 14
- Map ID
- 229
Loot for every boss, from AtlasLootClassic until Forever records its own.
67 quests, from the Classic database.
Use
Views of one record. The ink line draws to the tab you choose; arrow keys move between tabs.
Use
Long result lists. Say how many there are; keep the first and last page in reach.
- Choose a recipeOne you can learn now
- Set the attemptsFive is a good start
- Check your bagsTick what you have
- Gather the restOr trade for it
Use
A process with an order: a guide, an import, the storyboard. Done steps turn bronze; the current one carries the gem.
Implementation contract
Use it in the product
Keep location and history visible in site, record and process navigation.
- Exports
- Crumbs, Pagination, Steps, Tabs; SiteFrame, WaypointHeader, WaypointFooter
- Source
src/components/waypoint/ui/primitives.tsx; src/components/waypoint/ui/interactive.tsx- Props and defaults
- Crumbs requires items with labels and optional href. Pagination requires page, pages, total, pageSize and an href builder. Tabs requires label and items with id, label and content; value/onChange can control selection. SiteFrame (src/components/waypoint/site-frame.tsx) wraps every public route once, from the (site) layout and the 404; WaypointHeader takes optional extra palette entries and marks the current place from the path.
- HTML and keyboard
- Breadcrumbs use navigation and links. Tabs use a tablist, tabs and tabpanels; arrow keys move focus. Steps speak their order and current position.
- States and themes
- The etched header uses a bronze rule and an angular teal pennant that follows hover or keyboard focus, then returns to the current page. Chapter subtitles reveal on interaction; the current page keeps its teal label. Branding lives in the hero and footer. Current is distinct from keyboard focus. Controls keep 44px targets in both themes; the mobile sheet returns focus on Escape. History should restore an applied query and selected tab; reduced motion removes travel and pointer light tracking without changing destinations. The header's character chip shows the plan last made on the character or talent pages (src/lib/plan-memory.ts, this browser only) or offers to start one; it never shows a sample as the reader's.
- Data and provenance
- Put the selected record, tab and dataset build into the URL where they reproduce the view. The current gear catalog is build 1.60.1.70245.
Example usage
import { Crumbs } from "@/components/waypoint/ui/primitives";
export function ItemCrumbs() {
return <Crumbs items={[{ label: "Database", href: "/database" }, { label: "Lionheart Helm" }]} />;
}