# NavItem ## Description A navigation item component that serves as a semantic wrapper for individual navigation elements. Provides proper list item structure for navigation menus and ensures accessibility compliance when used within navigation containers. ## Aliases - NavItem - NavigationItem - NavListItem - MenuItem - NavElement ## Props Breakdown **Extends:** `LiHTMLAttributes` | Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | `children` | `ReactNode` | - | Yes | Content to render inside the navigation item | | `className` | `string` | - | No | Additional CSS class names for custom styling | | `role` | `string` | `'menuitem'` | No | ARIA role for accessibility | | `tabIndex` | `number` | - | No | Tab order for keyboard navigation | Plus all standard HTML list item attributes (`id`, `style`, `onClick`, etc.). ## Examples ### Basic Usage ```tsx import { Nav, NavItem, NavLink } from '@delightui/components'; function BasicExample() { return ( ); } ``` ### Navigation Items with Icons ```tsx function IconNavItemsExample() { return ( ); } ``` ### Interactive Navigation Items ```tsx function InteractiveNavItemsExample() { const [activeItem, setActiveItem] = useState('dashboard'); return ( ); } ``` ### Navigation Items with Buttons ```tsx function ButtonNavItemsExample() { const [notifications, setNotifications] = useState(3); return ( ); } ``` ### Disabled Navigation Items ```tsx function DisabledNavItemsExample() { const [userPermissions, setUserPermissions] = useState({ canViewReports: false, canManageUsers: false, canAccessSettings: true }); return ( ); } ``` ### Navigation Items with Context Menus ```tsx function ContextMenuNavItemsExample() { return ( ); } ``` ### Grouped Navigation Items ```tsx function GroupedNavItemsExample() { return ( ); } ``` ### Navigation Items with Custom Content ```tsx function CustomContentNavItemsExample() { const [unreadCount, setUnreadCount] = useState(5); const [storageUsed, setStorageUsed] = useState(78); return ( ); } ``` ### Mobile Navigation Items ```tsx function MobileNavItemsExample() { const [isMenuOpen, setIsMenuOpen] = useState(false); return ( <> ); } ``` ### Navigation Items with Keyboard Navigation ```tsx function KeyboardNavItemsExample() { const [focusedIndex, setFocusedIndex] = useState(0); const navItems = [ { to: '/dashboard', label: 'Dashboard', icon: 'Dashboard' }, { to: '/projects', label: 'Projects', icon: 'Folder' }, { to: '/team', label: 'Team', icon: 'People' }, { to: '/settings', label: 'Settings', icon: 'Settings' } ]; const handleKeyDown = (event, index) => { switch (event.key) { case 'ArrowDown': event.preventDefault(); setFocusedIndex((prev) => (prev + 1) % navItems.length); break; case 'ArrowUp': event.preventDefault(); setFocusedIndex((prev) => (prev - 1 + navItems.length) % navItems.length); break; case 'Home': event.preventDefault(); setFocusedIndex(0); break; case 'End': event.preventDefault(); setFocusedIndex(navItems.length - 1); break; } }; return ( ); } ``` ### Dynamic Navigation Items ```tsx function DynamicNavItemsExample() { const [userRole, setUserRole] = useState('admin'); const [navigationItems, setNavigationItems] = useState([]); useEffect(() => { const baseItems = [ { id: 'dashboard', label: 'Dashboard', to: '/dashboard', icon: 'Dashboard', roles: ['user', 'admin', 'moderator'] }, { id: 'projects', label: 'Projects', to: '/projects', icon: 'Folder', roles: ['user', 'admin', 'moderator'] }, { id: 'analytics', label: 'Analytics', to: '/analytics', icon: 'Analytics', roles: ['admin', 'moderator'] }, { id: 'users', label: 'User Management', to: '/users', icon: 'People', roles: ['admin'] }, { id: 'settings', label: 'Settings', to: '/settings', icon: 'Settings', roles: ['admin'] } ]; const filteredItems = baseItems.filter(item => item.roles.includes(userRole) ); setNavigationItems(filteredItems); }, [userRole]); return (
Current Role:
); } ```