Glrk UI

Navigation Menu

A wrapper for Base UI Navigation Menu — horizontal nav with trigger+content dropdowns, direct link items, hover support, and controlled state.

Basic
Triggers and link items
Group labels in content
Behavior
Default open (defaultValue)
Instant hover (delay=0)
Controlled value
Helpers
NavList
NavLinkItemAbout Us

Installation

npx shadcn@latest add @glrk-ui/navigation-menu

If you haven't set up the prerequisites yet, check out Prerequest section.

Copy and paste the following code into your project.

ui/navigation-menu.tsx
import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu'
import { ChevronDownIcon } from 'lucide-react'
import { cva } from 'class-variance-authority'

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-9 w-max items-center justify-center rounded-lg bg-background 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/50 focus-visible:outline-1 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)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95',
        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(
          '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/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md 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 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,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
  NavigationMenuPositioner,
}
ui/navigation-menu-wrapper.tsx
'use client'

import Link, { type LinkProps } from 'next/link'

import { cn } from '@/lib/utils'

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

type navLinkItemT = LinkProps & {
  children: React.ReactNode
  className?: string
}
type navLinkItemsT = navLinkItemT[]

type navMenuItemT = {
  key: string
  itemProps?: React.ComponentProps<typeof NavigationMenuItem>
} & (
  | {
      trigger: React.ReactNode
      content: React.ReactNode
      triggerCls?: string
      contentCls?: string
      triggerProps?: Omit<React.ComponentProps<typeof NavigationMenuTrigger>, 'children' | 'className'>
      contentProps?: React.ComponentProps<typeof NavigationMenuContent>
    }
  | navLinkItemT
)

type navMenuItemsT = navMenuItemT[]

function NavLinkItem({ children, className, ...props }: navLinkItemT) {
  return (
    <Link {...props} className={cn('flex items-center gap-2 text-sm', className)}>
      {children}
    </Link>
  )
}

type listWrapperProps = {
  items: navLinkItemsT
  wrapperCls?: string
}

function NavList({ items, wrapperCls }: listWrapperProps) {
  return (
    <ul className={cn(wrapperCls)}>
      {items.map((item, i) => (
        <li key={`${String(item.href)}-${i}`}>
          <NavLinkItem {...item} className={cn(item.className)} />
        </li>
      ))}
    </ul>
  )
}

type wrapperProps = React.ComponentProps<typeof NavigationMenu> & {
  items: navMenuItemsT
  triggerCls?: string
  contentCls?: string
  triggerProps?: Omit<React.ComponentProps<typeof NavigationMenuTrigger>, 'children' | 'className'>
}

function NavigationMenuWrapper({
  items,
  className,
  triggerCls,
  contentCls,
  triggerProps: globalTriggerProps,
  ...props
}: wrapperProps) {
  return (
    <NavigationMenu className={className} {...props}>
      <NavigationMenuList>
        {items.map(itemWrap => {
          const { key, ...item } = itemWrap

          if ('trigger' in item) {
            return (
              <NavigationMenuItem key={key} {...item.itemProps}>
                <NavigationMenuTrigger
                  className={cn(triggerCls, item.triggerCls)}
                  {...globalTriggerProps}
                  {...item.triggerProps}
                >
                  {item.trigger}
                </NavigationMenuTrigger>
                <NavigationMenuContent
                  {...item.contentProps}
                  className={cn(contentCls, item.contentCls)}
                >
                  {item.content}
                </NavigationMenuContent>
              </NavigationMenuItem>
            )
          }

          const { itemProps, children: linkChildren, className: linkCls, ...linkProps } =
            item as { itemProps?: React.ComponentProps<typeof NavigationMenuItem> } & navLinkItemT
          return (
            <NavigationMenuItem key={key} {...itemProps}>
              <NavigationMenuLink
                render={<Link {...linkProps} />}
                className={cn(navigationMenuTriggerStyle(), linkCls)}
              >
                {linkChildren}
              </NavigationMenuLink>
            </NavigationMenuItem>
          )
        })}
      </NavigationMenuList>
    </NavigationMenu>
  )
}

export {
  NavList,
  NavLinkItem,
  NavigationMenuWrapper,
  type navMenuItemT,
  type navMenuItemsT,
  type navLinkItemT,
  type navLinkItemsT,
}

Usage

Trigger item (with dropdown content)

import { NavigationMenuWrapper, NavList } from "@/components/ui/navigation-menu-wrapper"

<NavigationMenuWrapper
  items={[
    {
      key: "products",
      trigger: "Products",
      content: (
        <div className="p-4 w-64">
          <NavList
            items={[
              { href: "/analytics", children: "Analytics" },
              { href: "/reporting", children: "Reporting" },
            ]}
          />
        </div>
      ),
    },
  ]}
/>
<NavigationMenuWrapper
  items={[
    { key: "pricing", href: "/pricing", children: "Pricing" },
    { key: "blog", href: "/blog", children: "Blog" },
  ]}
/>

Mixed (triggers + links)

<NavigationMenuWrapper
  items={[
    {
      key: "home",
      trigger: "Home",
      content: <div className="p-4"><NavList items={[...]} /></div>,
    },
    { key: "pricing", href: "/pricing", children: "Pricing" },
  ]}
/>

Group labels in content

{
  key: "platform",
  trigger: "Platform",
  content: (
    <div className="p-3 w-72">
      <p className="mb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
        Tools
      </p>
      <NavList items={[{ href: "/formatter", children: "Formatter" }]} />
      <p className="mt-3 mb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
        Security
      </p>
      <NavList items={[{ href: "/audit", children: "Audit Log" }]} />
    </div>
  ),
}

Default open

<NavigationMenuWrapper
  defaultValue="products"
  items={[
    { key: "products", trigger: "Products", content: <div>...</div> },
  ]}
/>

Hover delay (instant open on hover)

Base UI Navigation Menu opens on hover by default (50ms delay). Adjust with delay and closeDelay:

<NavigationMenuWrapper
  delay={0}
  closeDelay={150}
  items={[...]}
/>

Controlled (external open/close)

const [value, setValue] = useState<string | null>(null)

<NavigationMenuWrapper
  value={value}
  onValueChange={v => setValue(v)}
  items={[
    { key: "tools", trigger: "Tools", content: <div>...</div> },
  ]}
/>

// Close programmatically:
<button onClick={() => setValue(null)}>Close</button>
// Open specific item:
<button onClick={() => setValue("tools")}>Open Tools</button>

Per-item trigger props

{
  key: "products",
  trigger: "Products",
  triggerCls: "font-semibold",
  triggerProps: { disabled: true },
  contentCls: "w-96",
  content: <div>...</div>,
}
import { NavList } from "@/components/ui/navigation-menu-wrapper"

<NavList
  wrapperCls="space-y-1"
  items={[
    { href: "/dashboard", children: "Dashboard" },
    { href: "/settings", children: <><SettingsIcon className="size-4" /> Settings</> },
  ]}
/>
import { NavLinkItem } from "@/components/ui/navigation-menu-wrapper"

<NavLinkItem href="/dashboard">Dashboard</NavLinkItem>

Reference

Prop

Type

Prop

Type

Prop

Type

Menubar

A wrapper for Base UI Menubar — multiple dropdown menus in a horizontal bar with plain, checkbox, and radio variants.

Breadcrumb

A simplified wrapper for Shadcn Breadcrumb with flexible option handling and automatic type conversion

On this page

InstallationUsageTrigger item (with dropdown content)Link item (no dropdown)Mixed (triggers + links)Group labels in contentDefault openHover delay (instant open on hover)Controlled (external open/close)Per-item trigger propsNavList helperNavLinkItem helperReferenceNavigationMenuWrapperNavListNavLinkItemRelated Components