Command Menu

Search documentation, components, and switch theme.

Atoms

Navigation Menu

A navigation menu with dropdown content.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/navigation-menu

Install the following dependencies:

npm install radix-ui class-variance-authority lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu'
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/ledgers">Ledgers</NavigationMenuLink>
        <NavigationMenuLink href="/payments">Payments</NavigationMenuLink>
        <NavigationMenuLink href="/wallets">Wallets</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
        <NavigationMenuLink href="/api">API Reference</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>