Kits

Navigation

Global navigation libraries for headers, menus, search entry points, breadcrumbs, and utility switches.

Purpose

The Navigation kit contains the components that appear across the storefront: header variants, desktop and mobile menus, search entry points, breadcrumbs, and common utilities like locale selectors or theme switches.

It is built on top of the UI Kit tokens and primitives, so navigation stays consistent with the rest of the system.

What’s inside (typical)

  • Header variants (basic/shop/marketing)
  • Desktop navigation (mega menu, side-by-side menus)
  • Mobile menu / drawer navigation
  • Breadcrumbs
  • Search overlay entry components
  • Utility controls (locale select, color mode switch, top bar)

Best practices

  • Keep naming stable to preserve the design-to-code contract.
  • Prefer adding variants through properties over duplicating components.