Navigation
Navigation
Section titled “Navigation”Navigation helps users understand where they are and how to get where they want to go. It should be predictable, accessible, and responsive.
Patterns
Section titled “Patterns”| Pattern | Use case | Position |
|---|---|---|
| Top navigation | Primary sections (3–6 items) | Sticky top of viewport |
| Sidebar | Deep hierarchies, docs | Fixed left, 240–280px |
| Breadcrumbs | Deep page context | Below header, above content |
| Tabs | Related views in one page | Below heading |
| Pagination | Long lists, search results | Below content, centered |
Active States
Section titled “Active States”- Active nav items use brand color +
font-semibold - Current page in sidebar gets a brand-tinted background (
brand-50) - Breadcrumb last item is plain text (not a link), using
text-gray-900 - Active tab has a bottom border (2px brand color)
Responsive Behavior
Section titled “Responsive Behavior”- Top nav: collapses to hamburger menu below
768px - Sidebar: becomes a slide-out drawer on mobile
- Tabs: horizontal scroll when overflowing (not wrap)
- Breadcrumbs: truncate middle items with
...on small screens
Guidelines
Section titled “Guidelines”- Keep top-level navigation items to 3–6 items
- Sidebar labels should be short and scannable
- Breadcrumb links should mirror the actual URL structure
- Use
aria-current="page"for the current navigation item - Ensure all nav items are keyboard accessible (Tab, Enter)