Navigation Component
A responsive navigation component with mobile menu and desktop sidebar layouts.
Responsive Demo
Toggle between different viewport widths to see the navigation's responsive behavior.
Current width: 768px
On mobile widths, tap the hamburger menu to see the mobile navigation overlay.
Features
Key features and capabilities of the Navigation component.
Responsive Design
Automatically switches between mobile hamburger menu and desktop sidebar based on screen size.
Mobile Menu
Full-screen overlay menu with smooth animations and touch-friendly interactions.
Desktop Sidebar
Fixed sidebar layout with scrollable content and persistent visibility.
Active State
Automatically highlights the current page with visual indicators.
Icon Support
Supports custom icons for each navigation item with consistent styling.
Accessibility
Built with ARIA labels, keyboard navigation, and screen reader support.
Component Props
Available properties for the Navigation component.
| Prop | Type | Default | Description |
|---|---|---|---|
| navigationSections | NavigationSection[] | required | Array of navigation sections with items and icons |
| class | string | '' | Additional CSS classes for custom styling |
Data Structure
How to structure navigation data for the component.
NavigationSection Interface
interface NavigationSection {
title: string;
items: NavigationItem[];
}NavigationItem Interface
interface NavigationItem {
href: string;
label: string;
icon: Component;
}