import { Building2 } from 'lucide-react'
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu'

const services: { title: string; href: string; description: string }[] = [
  {
    title: 'Building permits',
    href: '#building',
    description: 'Apply for permits to build, extend or demolish on your property.',
  },
  {
    title: 'Parking permits',
    href: '#parking',
    description: 'Resident and business parking in the city centre.',
  },
  {
    title: 'School placement',
    href: '#school',
    description: 'Apply for preschool, school or after-school care.',
  },
  {
    title: 'Financial assistance',
    href: '#assistance',
    description: 'Support for households that cannot cover basic living costs.',
  },
  {
    title: 'Waste collection',
    href: '#waste',
    description: 'Change your collection schedule or order bulky waste pickup.',
  },
  {
    title: 'Report a problem',
    href: '#report',
    description: 'Tell us about potholes, broken street lights or graffiti.',
  },
]

function ListItem({ title, children, href, ...props }: React.ComponentPropsWithoutRef<'li'> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink href={href} className="flex-col items-start">
        <div className="text-sm leading-none font-medium">{title}</div>
        <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
      </NavigationMenuLink>
    </li>
  )
}

export function NavigationMenuDemo() {
  return (
    <div className="flex h-[360px] items-start">
      <NavigationMenu align="start">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Get started</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[480px] grid-cols-[.8fr_1fr] gap-2">
                <li className="row-span-3">
                  <NavigationMenuLink
                    className="flex h-full w-full flex-col items-start justify-end rounded-md bg-linear-to-br from-primary/15 to-chart-2/15 p-4 no-underline select-none focus:shadow-md"
                    href="#e-services"
                  >
                    <Building2 className="size-6 text-primary" />
                    <div className="mt-4 mb-1 text-base font-medium">E-services</div>
                    <p className="text-sm leading-tight text-muted-foreground">
                      Apply, follow up and get decisions online, around the clock.
                    </p>
                  </NavigationMenuLink>
                </li>
                <ListItem href="#login" title="Log in">
                  Sign in with your e-ID to see your cases.
                </ListItem>
                <ListItem href="#track" title="Track a case">
                  Follow the status of an application with your case number.
                </ListItem>
                <ListItem href="#contact" title="Contact us">
                  Reach the service centre by phone, chat or email.
                </ListItem>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Services</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[520px] grid-cols-2 gap-1">
                {services.map((service) => (
                  <ListItem key={service.title} title={service.title} href={service.href}>
                    {service.description}
                  </ListItem>
                ))}
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#archive">
              Archive
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add https://rdf.dev.360online.com/r/navigation-menu.json

Installs to @/components/ui/navigation-menu.

Manual installation

Install the dependencies:

pnpm add @base-ui/react@^1.8.0 class-variance-authority@^0.7.1 lucide-react@^1.48.0

Copy the source into your project:

components/ui/navigation-menu.tsx

import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu'
import { cva } from 'class-variance-authority'
import { ChevronDownIcon } from 'lucide-react'
import type * as React from 'react'
import { cn } from '@/lib/utils'

function NavigationMenu({
	align = 'start',
	className,
	children,
	...props
}: NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, 'align'>) {
	return (
		<NavigationMenuPrimitive.Root
			data-slot="navigation-menu"
			className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}
			{...props}
		>
			{children}
			<NavigationMenuPositioner align={align} />
		</NavigationMenuPrimitive.Root>
	)
}

function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
	return (
		<NavigationMenuPrimitive.List
			data-slot="navigation-menu-list"
			className={cn('group flex flex-1 list-none items-center justify-center gap-0', className)}
			{...props}
		/>
	)
}

function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
	return (
		<NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn('relative', className)} {...props} />
	)
}

const navigationMenuTriggerStyle = cva(
	'group/navigation-menu-trigger inline-flex h-10 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted',
)

function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuPrimitive.Trigger.Props) {
	return (
		<NavigationMenuPrimitive.Trigger
			data-slot="navigation-menu-trigger"
			className={cn(navigationMenuTriggerStyle(), 'group', className)}
			{...props}
		>
			{children}{' '}
			<ChevronDownIcon
				className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
				aria-hidden="true"
			/>
		</NavigationMenuPrimitive.Trigger>
	)
}

function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {
	return (
		<NavigationMenuPrimitive.Content
			data-slot="navigation-menu-content"
			className={cn(
				'data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out',
				className,
			)}
			{...props}
		/>
	)
}

function NavigationMenuPositioner({
	className,
	side = 'bottom',
	sideOffset = 8,
	align = 'start',
	alignOffset = 0,
	...props
}: NavigationMenuPrimitive.Positioner.Props) {
	return (
		<NavigationMenuPrimitive.Portal>
			<NavigationMenuPrimitive.Positioner
				side={side}
				sideOffset={sideOffset}
				align={align}
				alignOffset={alignOffset}
				className={cn(
					'isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0',
					className,
				)}
				{...props}
			>
				<NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
					<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
				</NavigationMenuPrimitive.Popup>
			</NavigationMenuPrimitive.Positioner>
		</NavigationMenuPrimitive.Portal>
	)
}

function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {
	return (
		<NavigationMenuPrimitive.Link
			data-slot="navigation-menu-link"
			className={cn(
				"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring in-data-[slot=navigation-menu-content]:rounded-md in-data-[slot=navigation-menu-content]:focus-visible:ring-2 in-data-[slot=navigation-menu-content]:focus-visible:ring-inset data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
				className,
			)}
			{...props}
		/>
	)
}

function NavigationMenuIndicator({
	className,
	...props
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
	return (
		<NavigationMenuPrimitive.Icon
			data-slot="navigation-menu-indicator"
			className={cn(
				'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',
				className,
			)}
			{...props}
		>
			<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
		</NavigationMenuPrimitive.Icon>
	)
}

export {
	NavigationMenu,
	NavigationMenuContent,
	NavigationMenuIndicator,
	NavigationMenuItem,
	NavigationMenuLink,
	NavigationMenuList,
	NavigationMenuPositioner,
	NavigationMenuTrigger,
	navigationMenuTriggerStyle,
}

A collection of links for navigating websites, such as a municipal portal with services, politics and documents. Built on Base UI NavigationMenu with dropdown panels in a shared animated popup and full keyboard support.

Features

Dropdown panels with rich content
Shared animated popup that resizes between panels, with configurable alignment
Plain links styled as triggers with navigationMenuTriggerStyle
Active link state
Keyboard navigation and focus management

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu'

export function PortalNavigation() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Services</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="/building-permits">Building permits</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Examples

Default

A portal navigation with a featured panel and a service grid.

import { Building2 } from 'lucide-react'
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu'

const services: { title: string; href: string; description: string }[] = [
  {
    title: 'Building permits',
    href: '#building',
    description: 'Apply for permits to build, extend or demolish on your property.',
  },
  {
    title: 'Parking permits',
    href: '#parking',
    description: 'Resident and business parking in the city centre.',
  },
  {
    title: 'School placement',
    href: '#school',
    description: 'Apply for preschool, school or after-school care.',
  },
  {
    title: 'Financial assistance',
    href: '#assistance',
    description: 'Support for households that cannot cover basic living costs.',
  },
  {
    title: 'Waste collection',
    href: '#waste',
    description: 'Change your collection schedule or order bulky waste pickup.',
  },
  {
    title: 'Report a problem',
    href: '#report',
    description: 'Tell us about potholes, broken street lights or graffiti.',
  },
]

function ListItem({ title, children, href, ...props }: React.ComponentPropsWithoutRef<'li'> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink href={href} className="flex-col items-start">
        <div className="text-sm leading-none font-medium">{title}</div>
        <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
      </NavigationMenuLink>
    </li>
  )
}

export function NavigationMenuDemo() {
  return (
    <div className="flex h-[360px] items-start">
      <NavigationMenu align="start">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Get started</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[480px] grid-cols-[.8fr_1fr] gap-2">
                <li className="row-span-3">
                  <NavigationMenuLink
                    className="flex h-full w-full flex-col items-start justify-end rounded-md bg-linear-to-br from-primary/15 to-chart-2/15 p-4 no-underline select-none focus:shadow-md"
                    href="#e-services"
                  >
                    <Building2 className="size-6 text-primary" />
                    <div className="mt-4 mb-1 text-base font-medium">E-services</div>
                    <p className="text-sm leading-tight text-muted-foreground">
                      Apply, follow up and get decisions online, around the clock.
                    </p>
                  </NavigationMenuLink>
                </li>
                <ListItem href="#login" title="Log in">
                  Sign in with your e-ID to see your cases.
                </ListItem>
                <ListItem href="#track" title="Track a case">
                  Follow the status of an application with your case number.
                </ListItem>
                <ListItem href="#contact" title="Contact us">
                  Reach the service centre by phone, chat or email.
                </ListItem>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Services</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[520px] grid-cols-2 gap-1">
                {services.map((service) => (
                  <ListItem key={service.title} title={service.title} href={service.href}>
                    {service.description}
                  </ListItem>
                ))}
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#archive">
              Archive
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}

With Icons

Icon tiles with short descriptions, and a compact list of icon links.

import {
  Building2,
  CircleCheck,
  CircleDashed,
  CircleHelp,
  GraduationCap,
  HeartHandshake,
  Trees,
} from 'lucide-react'
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu'

const areas = [
  {
    icon: GraduationCap,
    title: 'Education',
    href: '#education',
    description: 'Preschool, schools and adult education.',
  },
  {
    icon: HeartHandshake,
    title: 'Care and support',
    href: '#care',
    description: 'Home help, elderly care and disability support.',
  },
  {
    icon: Trees,
    title: 'Environment',
    href: '#environment',
    description: 'Parks, nature reserves and environmental permits.',
  },
  {
    icon: Building2,
    title: 'Planning and building',
    href: '#planning',
    description: 'Detailed plans, permits and land surveying.',
  },
]

export function NavigationMenuWithIcons() {
  return (
    <div className="flex h-[320px] items-start">
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Areas</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[340px] gap-1">
                {areas.map((area) => (
                  <li key={area.title}>
                    <NavigationMenuLink href={area.href} className="items-start gap-3">
                      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
                        <area.icon />
                      </span>
                      <span className="flex flex-col gap-0.5">
                        <span className="font-medium">{area.title}</span>
                        <span className="text-muted-foreground">{area.description}</span>
                      </span>
                    </NavigationMenuLink>
                  </li>
                ))}
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>My cases</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[220px] gap-1">
                <li>
                  <NavigationMenuLink href="#pending">
                    <CircleHelp />
                    Awaiting information
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink href="#in-progress">
                    <CircleDashed />
                    In progress
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink href="#decided">
                    <CircleCheck />
                    Decided
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}

Center Aligned

The panel popup centred under the open trigger with align="center".

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@/components/ui/navigation-menu'

function ListItem({ title, children, href, ...props }: React.ComponentPropsWithoutRef<'li'> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink href={href} className="flex-col items-start">
        <div className="text-sm leading-none font-medium">{title}</div>
        <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
      </NavigationMenuLink>
    </li>
  )
}

export function NavigationMenuCenterAligned() {
  return (
    <div className="flex h-[260px] items-start">
      <NavigationMenu align="center">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Politics</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[260px] gap-1">
                <ListItem href="#council" title="Municipal council">
                  Meetings, agendas and minutes.
                </ListItem>
                <ListItem href="#committees" title="Committees">
                  Who decides what in the municipality.
                </ListItem>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Documents</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[260px] gap-1">
                <ListItem href="#diary" title="Public diary">
                  Search registered documents and cases.
                </ListItem>
                <ListItem href="#forms" title="Forms">
                  Download printable application forms.
                </ListItem>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}

Links Only

Top-level links styled as triggers with an active state.

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu'

export function NavigationMenuLinksOnly() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        {['Home', 'Services', 'Politics', 'Contact'].map((label, index) => (
          <NavigationMenuItem key={label}>
            <NavigationMenuLink
              active={index === 1}
              className={navigationMenuTriggerStyle()}
              href={`#${label.toLowerCase()}`}
            >
              {label}
            </NavigationMenuLink>
          </NavigationMenuItem>
        ))}
      </NavigationMenuList>
    </NavigationMenu>
  )
}

The navigation menu in a municipal portal header, next to the logo and a log in button.

import { Landmark, LogIn } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from '@/components/ui/navigation-menu'

const services: { title: string; href: string; description: string }[] = [
  {
    title: 'Building permits',
    href: '#building',
    description: 'Apply for permits to build, extend or demolish on your property.',
  },
  {
    title: 'Parking permits',
    href: '#parking',
    description: 'Resident and business parking in the city centre.',
  },
  {
    title: 'School placement',
    href: '#school',
    description: 'Apply for preschool, school or after-school care.',
  },
  {
    title: 'Financial assistance',
    href: '#assistance',
    description: 'Support for households that cannot cover basic living costs.',
  },
  {
    title: 'Waste collection',
    href: '#waste',
    description: 'Change your collection schedule or order bulky waste pickup.',
  },
  {
    title: 'Report a problem',
    href: '#report',
    description: 'Tell us about potholes, broken street lights or graffiti.',
  },
]

function ListItem({ title, children, href, ...props }: React.ComponentPropsWithoutRef<'li'> & { href: string }) {
  return (
    <li {...props}>
      <NavigationMenuLink href={href} className="flex-col items-start">
        <div className="text-sm leading-none font-medium">{title}</div>
        <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
      </NavigationMenuLink>
    </li>
  )
}

export function NavigationMenuSiteHeader() {
  return (
    <div className="flex h-[640px] w-full flex-col bg-muted/30">
      <header className="flex items-center gap-4 border-b bg-background px-6 py-3">
        <a href="#home" className="flex items-center gap-2 font-medium">
          <span className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
            <Landmark className="size-4" />
          </span>
          Lindå Municipality
        </a>
        <NavigationMenu className="ml-2">
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Services</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-[480px] grid-cols-2 gap-1">
                  {services.slice(0, 4).map((service) => (
                    <ListItem key={service.title} title={service.title} href={service.href}>
                      {service.description}
                    </ListItem>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Politics</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-[280px] gap-1">
                  <ListItem href="#council" title="Council meetings">
                    Next meeting on 16 June 2026 at 18:00.
                  </ListItem>
                  <ListItem href="#minutes" title="Agendas and minutes">
                    Documents from the council and committees.
                  </ListItem>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#contact">
                Contact
              </NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
        <Button size="sm" className="ml-auto">
          <LogIn data-icon="inline-start" />
          Log in
        </Button>
      </header>
      <main className="mx-auto flex w-full max-w-2xl flex-col gap-2 px-6 py-12">
        <h1 className="text-2xl font-semibold tracking-tight">Welcome to Lindå Municipality</h1>
        <p className="text-muted-foreground">
          Apply for permits, follow your cases and find opening hours for libraries, pools and recycling centres.
        </p>
      </main>
    </div>
  )
}

Accessibility

Rendered as a nav element with a list of items
Tab and arrow keys move between triggers and links
Escape closes the open panel and returns focus to its trigger
Use the active prop on the link for the current page (sets aria-current)

Custom link elements

NavigationMenuLink renders an <a>. To use a router link, pass it with the render prop:

<NavigationMenuLink render={<Link href="/contact" />}>Contact</NavigationMenuLink>

Navigation Menu