Navigation Components

Primitives for site chrome and wayfinding.

All components accept the base props in addition to those listed.

Prop tables are auto-generated by npm run gen:docs from the zod schemas. Edit inside <!-- gen:props --> blocks will be overwritten.

navbar

Top navigation bar with a brand and menu items.

Prop	Type	Description
brand	string	Brand/logo text (left side)
items	string[]	Menu items (right side)

navbar:
  brand: "DocHub"
  items: ["Home", "Docs", "Pricing", "Blog"]

sidebar

Vertical navigation list. Commonly placed as the left column of a dashboard layout.

Prop	Type	Description
items	string[]	Menu entries
active	string | number	Active entry — label or zero-based index

sidebar:
  items: ["Getting Started", "API", "FAQ"]
  active: "API"

tabs

Horizontal tabbed navigation.

Prop	Type	Description
items	string[]	Tab labels
active	string | number	Active tab — label or zero-based index

tabs:
  items: ["Overview", "Billing", "Team"]
  active: 0

breadcrumb

Hierarchical trail showing the user's path.

Prop	Type	Description
items	string[]	Segments from root to current

breadcrumb:
  items: ["Projects", "Dashboard", "Settings"]

pagination

Page navigation control showing current/total.

Prop	Type	Description
current	number	Current page (1-based)
total	number	Total page count

pagination:
  current: 3
  total: 12

stepper

Multi-step progress indicator. Useful for onboarding or checkout flows.

Prop	Type	Description
items	string[]	Step labels
active	number	Zero-based index of the active step

stepper:
  items: ["Account", "Plan", "Payment", "Confirm"]
  active: 2