Navigation Menu component is a collection of links designed for navigating websites efficiently. It provides a structured and user-friendly way to organize and present various sections or pages of a website. The Navigation Menu enhances the user experience by offering quick access to different areas of the site, facilitating seamless navigation and exploration. This component is essential for creating an intuitive and accessible menu system that guides users through the content and features of a web application.

Installation

yarn add @camped-ui/navigation-menu

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@camped-ui/navigation-menu";

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

Link Component

When using the Next.js <Link /> component, you can use navigationMenuTriggerStyle() to apply the correct styles to the trigger.

import { navigationMenuTriggerStyle } from "@camped-ui/navigation-menu";

<NavigationMenuItem>
  <Link href="/docs" legacyBehavior passHref>
    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
      Documentation
    </NavigationMenuLink>
  </Link>
</NavigationMenuItem>

See also the Radix UI documentation for handling client side routing.

Multi Select Pagination