# Nav ## Description A navigation container component that provides semantic structure for navigation menus and lists. Serves as a flexible wrapper for organizing navigation items, links, and other navigation-related content with proper accessibility semantics and keyboard navigation support. ## Aliases - Nav - Navigation - NavContainer - NavigationMenu - NavBar ## Props Breakdown **Extends:** `HTMLAttributes` | Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | `children` | `ReactNode` | - | Yes | Navigation items, links, or other content to display | | `className` | `string` | - | No | Additional CSS class names for custom styling | | `role` | `string` | `'navigation'` | No | ARIA role for accessibility | | `aria-label` | `string` | - | No | Accessible label for screen readers | Plus all standard HTML element attributes (`id`, `style`, `onClick`, etc.). ## Examples ### Basic Usage ```tsx import { Nav, NavItem, NavLink } from '@delightui/components'; function BasicExample() { return ( ); } ``` ### Horizontal Navigation Bar ```tsx function HorizontalNavExample() { return ( ); } ``` ### Vertical Sidebar Navigation ```tsx function SidebarNavExample() { const [activeSection, setActiveSection] = useState('dashboard'); return ( ); } ``` ### Navigation with Nested Sections ```tsx function NestedNavExample() { const [expandedSections, setExpandedSections] = useState(new Set()); const toggleSection = (section) => { const newExpanded = new Set(expandedSections); if (newExpanded.has(section)) { newExpanded.delete(section); } else { newExpanded.add(section); } setExpandedSections(newExpanded); }; return ( ); } ``` ### Responsive Navigation ```tsx function ResponsiveNavExample() { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); return ( <> {/* Mobile Menu Toggle */} {/* Navigation */} ); } ``` ### Navigation with User Actions ```tsx function UserActionNavExample() { const [user, setUser] = useState({ name: 'John Doe', avatar: '/user-avatar.jpg' }); return ( ); } ``` ### Tab Navigation ```tsx function TabNavExample() { const [activeTab, setActiveTab] = useState('overview'); const tabs = [ { id: 'overview', label: 'Overview', icon: 'Dashboard' }, { id: 'activity', label: 'Activity', icon: 'Timeline' }, { id: 'settings', label: 'Settings', icon: 'Settings' }, { id: 'billing', label: 'Billing', icon: 'CreditCard' } ]; return ( ); } ``` ### Breadcrumb Navigation ```tsx function BreadcrumbNavExample() { const breadcrumbs = [ { label: 'Home', to: '/' }, { label: 'Products', to: '/products' }, { label: 'Electronics', to: '/products/electronics' }, { label: 'Smartphones', to: '/products/electronics/smartphones' }, { label: 'iPhone 14', to: null } // Current page ]; return ( ); } ``` ### Pagination Navigation ```tsx function PaginationNavExample() { const [currentPage, setCurrentPage] = useState(1); const totalPages = 10; const maxVisiblePages = 5; const getVisiblePages = () => { const start = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2)); const end = Math.min(totalPages, start + maxVisiblePages - 1); return Array.from({ length: end - start + 1 }, (_, i) => start + i); }; return ( ); } ``` ### Custom Styled Navigation ```tsx function CustomStyledNavExample() { return ( ); } ```