NavigationMenu

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
          {/* feature tile */}
          <li className="row-span-3">
            <NavigationMenuLink asChild>
              <a className="flex h-full flex-col justify-end rounded-md bg-muted p-5" href="/">
                <div className="mb-2 mt-4 text-lg font-medium">tidal</div>
                <p className="text-base leading-6 text-muted-foreground">
                  Beautifully designed components you can copy into your apps.
                </p>
              </a>
            </NavigationMenuLink>
          </li>
          <ListItem href="/" title="Introduction">
            Re-usable components built using Radix UI and Tailwind CSS.
          </ListItem>
          {/* …more items */}
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
      <NavigationMenuLink className={navigationMenuTriggerStyle()} href="/">
        Documentation
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-[360px] gap-2 p-3">
          <ListItem href="#" title="Analytics">
            Track revenue, sessions, and funnel conversion.
          </ListItem>
          <ListItem href="#" title="Inbox">
            Unified support inbox with shared assignments.
          </ListItem>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
        Pricing
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>