Navigation Menu

A collection of links for navigating websites.

@@directive("'use client'")

type componentInfo = {

Installation


npx shadcn@latest add @rescript-shadcn/NavigationMenu

Usage

<NavigationMenu>
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger> {"Item One"->React.string} </NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <NavigationMenu.Link> {"Link"->React.string} </NavigationMenu.Link>
      </NavigationMenu.Content>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu>

Link Component

Use the render prop to compose a custom link component such as Next.js Link.

 
module NavigationMenuDemo = {
  @react.component
  let make = () =>
    <NavigationMenu.Item>
      <NavigationMenu.Link
        render={<Next.Link href="/docs" />}
        className={NavigationMenu.navigationMenuTriggerStyle()}
      >
        Documentation
      </NavigationMenuLink>
    </NavigationMenuItem>
}

API Reference

See the Base UI Navigation Menu documentation for more information.