Kosorikōsori alpha
ExamplesTemplatesShowcase

Navigation Menu

A collection of links for navigating websites.

Docs
API Reference
Dependencies
@radix-ui/react-navigation-menu: v1.2.5

Installation

npx @kosori/cli add components navigation-menu

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from '~/components/ui/navigation-menu';
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

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

import { navigationMenuTriggerStyle } from '~/components/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.

Edit on GitHub

Previous

Menubar

Next

Pagination

On this page

Contribute
Report a bugNew ideasStart a discussion