logo hereU.lib
    Quick search...K

    Input Components

    ButtonsDropdown MenuCheckboxFormInputRadioSwitchTextareaToggle

    Layout

    CardTabsAccordionCollapsible

    Data Display

    TableCarouselAvatarBadge

    Dialog

    Feedback

    ToastAlertProgress

    Navigation

    BreadcrumbNavigation Menu

    Overlay

    TooltipDrawerModel CardCommand

    Navigation Menu

    A component for displaying navigation menus.

    Usage Examples

    Basic Usage

    Use the `NavigationMenu` component to create a simple navigation menu with collapsible sections for different categories.

    import React from 'react';
  import {
    NavigationMenu,
    NavigationMenuList,
    NavigationMenuItem,
    NavigationMenuTrigger,
    NavigationMenuContent,
    NavigationMenuLink,
  } from '@/components/NavigationMenu';
  
  const ExampleNavigationMenu = () => {
    return (
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Home</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="/home">Home Page</NavigationMenuLink>
              <NavigationMenuLink href="/about">About</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
          
          <NavigationMenuItem>
            <NavigationMenuTrigger>Services</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="/web-design">Web Design</NavigationMenuLink>
              <NavigationMenuLink href="/seo">SEO Services</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
          
          <NavigationMenuItem>
            <NavigationMenuTrigger>Contact</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="/contact">Contact Us</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    );
  };
  
  export default ExampleNavigationMenu;

    Custom Styling

    You can customize the appearance of the navigation menu using the `className` prop to pass custom styles.

    import React from 'react';
  import {
    NavigationMenu,
    NavigationMenuList,
    NavigationMenuItem,
    NavigationMenuTrigger,
    NavigationMenuContent,
    NavigationMenuLink,
  } from '@/components/NavigationMenu';
  
  const CustomNavigationMenu = () => {
    return (
      <NavigationMenu className="bg-gray-800 text-white">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger className="hover:bg-gray-700">Home</NavigationMenuTrigger>
            <NavigationMenuContent className="bg-gray-900">
              <NavigationMenuLink href="/home" className="text-white hover:text-gray-300">Home Page</NavigationMenuLink>
              <NavigationMenuLink href="/about" className="text-white hover:text-gray-300">About</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
          
          <NavigationMenuItem>
            <NavigationMenuTrigger className="hover:bg-gray-700">Services</NavigationMenuTrigger>
            <NavigationMenuContent className="bg-gray-900">
              <NavigationMenuLink href="/web-design" className="text-white hover:text-gray-300">Web Design</NavigationMenuLink>
              <NavigationMenuLink href="/seo" className="text-white hover:text-gray-300">SEO Services</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
          
          <NavigationMenuItem>
            <NavigationMenuTrigger className="hover:bg-gray-700">Contact</NavigationMenuTrigger>
            <NavigationMenuContent className="bg-gray-900">
              <NavigationMenuLink href="/contact" className="text-white hover:text-gray-300">Contact Us</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    );
  };
  
  export default CustomNavigationMenu;

    Accessibility

    Improve accessibility by using `aria-label` and `aria-expanded` for better screen reader support and state management.

    import React from 'react';
  import {
    NavigationMenu,
    NavigationMenuList,
    NavigationMenuItem,
    NavigationMenuTrigger,
    NavigationMenuContent,
    NavigationMenuLink,
  } from '@/components/NavigationMenu';
  
  const AccessibleNavigationMenu = () => {
    return (
      <NavigationMenu aria-label="Main navigation menu">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger aria-expanded="false">Home</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="/home">Home Page</NavigationMenuLink>
              <NavigationMenuLink href="/about">About</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
          
          <NavigationMenuItem>
            <NavigationMenuTrigger aria-expanded="false">Services</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="/web-design">Web Design</NavigationMenuLink>
              <NavigationMenuLink href="/seo">SEO Services</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
          
          <NavigationMenuItem>
            <NavigationMenuTrigger aria-expanded="false">Contact</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="/contact">Contact Us</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    );
  };
  
  export default AccessibleNavigationMenu;