@radix-ui/react-navigation-menu

Basic Navigation Menu

This code sample demonstrates how to create a basic navigation menu with three links: Home, About, and Contact. The NavigationMenu component wraps the entire menu, while NavigationMenuItem and NavigationMenuLink are used for individual menu items and links, respectively.

import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from '@radix-ui/react-navigation-menu';

function BasicMenu() {
  return (
    <NavigationMenu>
      <NavigationMenuItem>
        <NavigationMenuLink href="#home">Home</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#about">About</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#contact">Contact</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenu>
  );
}

Submenu

This code sample demonstrates how to create a navigation menu with a submenu. The Services menu item has a submenu with two links: Design and Development. The NavigationMenuSub, NavigationMenuSubTrigger, and NavigationMenuSubContent components are used to create the submenu structure.

import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuSub, NavigationMenuSubTrigger, NavigationMenuSubContent } from '@radix-ui/react-navigation-menu';

function Submenu() {
  return (
    <NavigationMenu>
      <NavigationMenuItem>
        <NavigationMenuLink href="#home">Home</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuSub>
          <NavigationMenuSubTrigger>Services</NavigationMenuSubTrigger>
          <NavigationMenuSubContent>
            <NavigationMenuLink href="#design">Design</NavigationMenuLink>
            <NavigationMenuLink href="#development">Development</NavigationMenuLink>
          </NavigationMenuSubContent>
        </NavigationMenuSub>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#contact">Contact</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenu>
  );
}

Custom Styling

This code sample demonstrates how to apply custom styling to the navigation menu. By adding className properties and importing a custom CSS file, you can style the menu to fit your design requirements.

import { NavigationMenu, NavigationMenuItem, NavigationMenuLink } from '@radix-ui/react-navigation-menu';
import './customStyles.css';

function CustomStyledMenu() {
  return (
    <NavigationMenu className="custom-menu">
      <NavigationMenuItem className="custom-item">
        <NavigationMenuLink className="custom-link" href="#home">Home</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem className="custom-item">
        <NavigationMenuLink className="custom-link" href="#about">About</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem className="custom-item">
        <NavigationMenuLink className="custom-link" href="#contact">Contact</NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenu>
  );
}