Back to Playbook

Navigation

Navigation components help users find their way around the product.

Navigation Playground

Explore different navigation patterns and how they adapt to different contexts.

Why it matters

Good navigation is like a map for your digital product. It helps users understand where they are, where they can go, and how to get back. Without clear navigation, even the best content is useless because users can't find it.

Core Patterns

Top Bar

Standard for desktop. Contains primary links, logo, and user profile.

Sidebar

Great for complex apps with many sections. Can be collapsible.

Tabs

Used to switch between different views within the same context.

Breadcrumbs

Shows the path to the current page, allowing easy navigation up the hierarchy.

Best Practices

  1. Current State

    Always indicate which page or section is currently active.

  2. Limit Options

    Don't overwhelm users. Group related items if you have more than 7 links.

  3. Consistency

    Keep navigation in the same place on every page.

Previous: Forms Next: Cards