Is documented
undefined
Component checklist
Figma Link
undefined
Figma
undefined
Up to date
Status
The component has a health status indicated
Stable
HTML
undefined
Up to date
React
undefined
Up to date
Documentation link
undefined
Design Usage
Navigation provides the primary means for moving between pages, sections, or views in an application or website. Unlike Tabs, which switch content within the same page context, Navigation is used for site- or app-level structure, ensuring users can find and move between different areas of the product.
When to Use
- To give users access to top-level sections (e.g., Home, Products, Pricing, About).
- For site-wide menus (headers, sidebars, footers).
- For multi-page applications, where each section is its own destination.
- When users need to explore different content domains, not just views of the same data.
When Not to Use
- To switch between related panels within one page – use Tabs.
- For binary or small mutually exclusive choices (e.g., “List / Grid”) – use Segmented Control.
- To progressively disclose detail within a page – use Accordion or Collapse.
- To present contextual actions – use Button, Action Group, or Split Button.
Best Practices
There are general recommendations which doesn’t have to be tightly coupled to our implementation. If you find that some features are missing, please contact the Spirit team.
- Keep navigation clear and consistent across the product.
- Place navigation in predictable locations (top header, left sidebar).
- Use descriptive labels – avoid jargon or internal terms.
- Indicate the current location with a clear active state.
- Keep the number of primary items manageable (ideally under 7); group secondary items into menus or drawers.
- Consider responsive patterns – e.g., collapsing into a hamburger menu or bottom nav bar on small screens.
- Provide a clear hierarchy – use sub-navigation, breadcrumbs, or menus for deeper levels.