Navigation Menu
Navigation Menu is a Chord navigation component built from Base UI primitives and project tokens.
import { CaretDown } from "@phosphor-icons/react/dist/ssr";import { NavigationMenu } from "@/components/public/NavigationMenu";<NavigationMenu.Root> <NavigationMenu.List> <NavigationMenu.Item> <NavigationMenu.Trigger> Products <NavigationMenu.Icon> <CaretDown size={12} weight="bold" /> </NavigationMenu.Icon> </NavigationMenu.Trigger> <NavigationMenu.Content> <NavigationMenu.Link href="#">Analytics</NavigationMenu.Link> <NavigationMenu.Link href="#">Automation</NavigationMenu.Link> </NavigationMenu.Content> </NavigationMenu.Item> <NavigationMenu.Item> <NavigationMenu.Link href="#">Pricing</NavigationMenu.Link> </NavigationMenu.Item> </NavigationMenu.List> <NavigationMenu.Portal> <NavigationMenu.Positioner sideOffset={6}> <NavigationMenu.Popup> <NavigationMenu.Viewport /> </NavigationMenu.Popup> </NavigationMenu.Positioner> </NavigationMenu.Portal></NavigationMenu.Root>