Navigation
Menus, sidebars, breadcrumbs, and wayfinding
5 patterns available
``` Home / Category / Subcategory / Current Item ``` Characteristics: - Compact, horizontal trail
Breadcrumb
Hierarchical trail showing the user's location within a site or app
--breadcrumb--navigation--hierarchy
``` [•••] ▾ ──────────── Edit Move Duplicate
Dropdown Menu
Contextual list of actions or options that appears on click or hover
--dropdown--menu--select+1
``` ┌────────────────────────────────────────────┐ │ [Title] [X] │ │ ────────────────────────────────────────── │ │ │ │ │ │ │ Modal body content goes here. │ │
Modal / Dialog
Overlaid modal dialog for focused tasks, confirmations, and complex forms
--modal--dialog--overlay+1
``` ┌────────────────────────────────────────────────────────┐ │ [Logo] Home Features Pricing Docs [Sign in] │ │ [Primary CTA] │ └────────────────────────────────────────────────────────┘ ```
Navigation Bar
Top navigation bar (primary site/global nav) with branding and key links
--nav--navbar--header+2
``` ┌─────────────┬──────────────────────────────┐ │ Logo │ │ ├─────────────┤ Main Content │ │ › Dashboard │ │ │ › Analytics │ │
Sidebar Navigation
Vertical navigation menu positioned on the side of a page, typically on the left, containing links and menu items
--navigation--sidebar--menu+2