<NavigationMenu>
  <NavigationMenu.Link href="/overview/introduction">
    Introduction
  </NavigationMenu.Link>
  <NavigationMenu.Dropdown id="1">
    <NavigationMenu.DropdownTrigger>Theme</NavigationMenu.DropdownTrigger>
    <NavigationMenu.DropdownContent>
      <NavigationMenu.DropdownItem href="/theme/colours">
        Colours
      </NavigationMenu.DropdownItem>
      <NavigationMenu.DropdownItem href="/theme/effects">
        Effects
      </NavigationMenu.DropdownItem>
      <NavigationMenu.DropdownItem href="/theme/icons">
        Icons
      </NavigationMenu.DropdownItem>
    </NavigationMenu.DropdownContent>
  </NavigationMenu.Dropdown>
</NavigationMenu>

With client side routing

NavigationMenu.Dropdown, NavigationMenu.DropdownItem and NavigationMenu.Link can be passed an active prop for instances when you want to highlight the currently active route. See below for examples using client side routing with the NavigationMenu.Link component. The same method can be applied to NavigationMenu.Dropdown and NavigationMenu.DropdownItem.

Example using React Router

const Link = ({ href, ...props }) => {
  const { pathname } = useLocation()
  const isActive = path === href

  return (
    <NavigationMenu.Link active={isActive} {...props}>
      Introduction
    </NavigationMenu.Link>
  )
}

Example using Next JS

const Link = ({ href, ...props }) => {
  const router = useRouter()
  const isActive = router.asPath === href

  return (
    <NavigationMenu.Link active={isActive} {...props}>
      Introduction
    </NavigationMenu.Link>
  )
}

Changing the layout of the dropdown content

By default, dropdown items inside of NavigationMenu.DropdownContent will stack.

If you want to change the way items are displayed, you can add custom styling to NavigationMenu.DropdownContent.

In the below example the styling of NavigationMenu.DropdownContent has been changed to allow a grid layout.

<NavigationMenu>
<NavigationMenu.Link href="/overview/introduction">
  Introduction
</NavigationMenu.Link>
<NavigationMenu.Dropdown id="1">
  <NavigationMenu.DropdownTrigger>Theme</NavigationMenu.DropdownTrigger>
  <NavigationMenu.DropdownContent
    className="grid gap-1 w-125 grid-flow-col grid-rows-[1fr_1fr]"
  >
    {['colours', 'icons', 'effects', 'typography'].map((item) => (
      <NavigationMenu.DropdownItem href={`/theme/${item}`}>
        <NavigationMenu.DropdownItemTitle>
          {item}
        </NavigationMenu.DropdownItemTitle>
        <Text>This is some example text about {item}</Text>
      </NavigationMenu.DropdownItem>
    ))}
  </NavigationMenu.DropdownContent>
</NavigationMenu.Dropdown>
</NavigationMenu>

DropdownItem composition example

DropdownItem gives a lot of flexibility. It's an easy to compose it for own purposes.

<NavigationMenu.DropdownItem href="/" active>
  <div
    className="grid gap-2 grid-cols-[1fr_7fr]"
  >
    <Icon is={Feed} size={'md'} />
    <div className="flex flex-col">
      <NavigationMenu.DropdownItemTitle bold className="mb-3">
        Example title
      </NavigationMenu.DropdownItemTitle>
      <Text>This is example subtitle</Text>
    </div>
  </div>
</NavigationMenu.DropdownItem>

Dropdown Trigger

NavigationMenu.Dropdown gives you the way to pass your own trigger component inside the NavigationMenu.DropdownTrigger. The children of NavigationMenu.DropdownTrigger can be a plain text or more complex component.

<NavigationMenu.Dropdown id="1">
  <NavigationMenu.DropdownTrigger>
    <Avatar />
  </NavigationMenu.DropdownTrigger>
  <NavigationMenu.DropdownContent>// content</NavigationMenu.DropdownContent>
</NavigationMenu.Dropdown>

<NavigationMenu.Dropdown id="2">
  <NavigationMenu.DropdownTrigger>
    Plain text
  </NavigationMenu.DropdownTrigger>
  <NavigationMenu.DropdownContent>// content</NavigationMenu.DropdownContent>
</NavigationMenu.Dropdown>

API Reference

NavigationMenu

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`defaultValue`	`string`	-	-
`delayDuration`	`number`	-	-
`dir`	`"ltr"` \| `"rtl"`	-	-
`onValueChange`	`(value: string) => void`	-	-
`orientation`	`"horizontal"` \| `"vertical"`	-	-
`skipDelayDuration`	`number`	-	-
`value`	`string`	-	-

NavigationMenu.Link

Prop	Type	Default	Required
`active`	`boolean`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`disabled`	`boolean`	-	-
`onSelect`	`(event: Event) => void`	-	-
`variant`	`"link"` \| `"dropdownItem"`	`link`	-

NavigationMenu.Dropdown

Prop	Type	Default	Required
`active`	`boolean`	-	-

NavigationMenu.DropdownContent

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`forceMount`	`true`	-	-
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	-
`onFocusOutside`	`(event: FocusOutsideEvent) => void`	-	-
`onInteractOutside`	`(event: FocusOutsideEvent \| PointerDownOutsideEvent) => void`	-	-
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	-	-

NavigationMenu.DropdownItem

Prop	Type	Default	Required
`active`	`boolean`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`disabled`	`boolean`	-	-
`onSelect`	`(event: Event) => void`	-	-
`variant`	`"link"` \| `"dropdownItem"`	-	-