Studiov1.2.3
Studio/Patterns/Navigation Bar

Navigation Bar

Navigation

Fixed top navigation with logo, desktop links, and mobile hamburger menu. Supports scroll-aware frosted glass effect.

All patterns
Start
ActiveSecondaryTertiary
Use Cases
  • Every public-facing app
  • Portal sites requiring multi-page navigation
  • Sites with 4-7 top-level pages
Do
  • Keep navigation items under 7
  • Use frosted glass background on scroll
  • Include mobile hamburger for < 768px
  • Highlight the active page
  • Place primary CTA as the rightmost button
Avoid
  • Nest dropdowns more than 1 level deep
  • Use icons without labels on desktop
  • Hide critical pages behind a hamburger on desktop
  • Auto-hide the nav on scroll-down for content-heavy pages
Reference component: NavBarVariants: 2Token bindings: 4