Navbar

Responsive navigation patterns that adapt to different screen sizes and user contexts.

Overview
The navbar component provides three responsive variants optimized for different device types and screen sizes.

Mobile

Hamburger menu with slide-out drawer for space-constrained screens (< 640px)

Tablet

Icon-only sidebar with hover tooltips for medium screens (640px - 1023px)

Desktop

Full sidebar with icons and labels, collapsible to icon-only (≥ 1024px)

Interactive Examples
Explore each navbar variant with live interactive demos
Usage Guidelines

When to Use Each Variant

  • Mobile: Use for screens below 640px where horizontal space is limited. The hamburger menu keeps the interface clean while maintaining full navigation access.
  • Tablet: Use for medium screens (640px - 1023px) where you want persistent navigation without sacrificing too much horizontal space.
  • Desktop: Use for large screens (1024px+) where you have ample space. The collapsible feature gives users control over their workspace.

Best Practices

  • Keep navigation items to 5-7 for optimal usability
  • Use clear, recognizable icons that match their labels
  • Ensure sufficient color contrast for accessibility
  • Provide keyboard navigation support (Tab, Enter, Escape)
  • Include proper ARIA labels for screen readers
  • Maintain consistent navigation order across all variants

Accessibility Considerations

  • All interactive elements have proper ARIA labels
  • Keyboard navigation works across all variants
  • Focus indicators are clearly visible
  • Tooltips provide context without requiring hover (keyboard accessible)
  • Color is not the only indicator of active states
Implementation
Basic usage of the ResponsiveNavbar component
import { ResponsiveNavbar } from '@/components/responsive-navbar';

// Mobile variant
<ResponsiveNavbar variant="mobile" />

// Tablet variant
<ResponsiveNavbar variant="tablet" />

// Desktop variant (default)
<ResponsiveNavbar variant="desktop" />

// Responsive implementation using CSS
<div className="block md:hidden">
  <ResponsiveNavbar variant="mobile" />
</div>
<div className="hidden md:block lg:hidden">
  <ResponsiveNavbar variant="tablet" />
</div>
<div className="hidden lg:block">
  <ResponsiveNavbar variant="desktop" />
</div>