WFP logoDesign System
Components

Navigation Menu

View on shadcn/ui

A collection of links for navigating websites.

Installation

pnpm dlx shadcn@latest add https://dev.designsystem.wfp.org/r/navigation-menu.json

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item one</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Changelog

  • 6 July 2026: added explicit "border-border" class
  • 18 June 2026: refreshed trigger and link styling
  • 26 March 2026: new active and focus colours

On this page

InstallationUsageChangelog