Skip to content

Header

Header

Header is the main site navigation component featuring logo, navigation menu, user actions, and responsive behavior across all device sizes.

PropertyDesktopTabletMobile
Height64-80px64px56px
Padding24px horizontal16px16px
Logo Max-width140-180px120px100px
BackgroundWhite/brandWhiteWhite
ShadowSubtleSubtleBottom border

Full navigation visible, logo left, actions right

Desktop Header

Condensed navigation, some items may collapse

Hamburger menu, full-screen drawer navigation

PatternDescription
StandardLogo left, nav center, actions right
CenteredLogo centered, nav and actions flanking
MinimalLogo left, minimal navigation only
StateAppearance
DefaultBrand or neutral color
HoverUnderline or background highlight
ActiveBold or indicator shown
Current PageDistinct active state
BehaviorDescription
Slide-inDrawer from left/right
Full-screenOverlay with centered menu
DropdownExpand from header
  • Primary site navigation
  • All main application pages
  • Consistent top navigation across site
✅ Do❌ Don’t
Keep navigation conciseOverload menu items
Use clear labelsCryptic navigation text
Show current pageHide user location
Responsive on mobileNon-functional mobile menu
Accessible keyboard navMouse-only navigation
Sticky on scroll (optional)Jumping header position
ElementMax Width/Length
Logo140-180px
Nav Items5-7 items
Nav Text15-20 characters
User Actions3-4 items
  • Keyboard navigation through all links
  • Accessibility labels for navigation
  • Skip to content link
  • Proper heading hierarchy
  • Focus visible states