Navigation Menu - Supabase

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

bash

npx shadcn-ui@latest add navigation-menu

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

bash

npm install @radix-ui/react-navigation-menu

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Usage

tsx

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

tsx

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

Link Component

When using the Next.js <Link /> component, you can use navigationMenuTriggerStyle() to apply the correct styles to the trigger.

tsx

import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'

tsx

<NavigationMenuItem>
  <Link href="/docs" legacyBehavior passHref>
    <NavigationMenuLink className={navigationMenuTriggerStyle()}>Documentation</NavigationMenuLink>
  </Link>
</NavigationMenuItem>

See also the Radix UI documentation for handling client side routing.

With horizontal scroll

We can wrap a the <NavigationMenuList /> in a <ScrollArea /> component to make the menu scroll.

However, then we must also make sure the <NavigationMenuContent /> is positioned correctly and rendered outside the scroll area. We set renderViewport={false} on the <NavigationMenu /> component to prevent the viewport from being rendered. And then add our own Viewport with <NavigationMenuViewport />.

Then all our content panels will render themselves outside the scroll area and inside the viewport.

You can also add props to <NavigationMenuViewport /> to style it as you like, including the containerProps prop to add classes to the container div element inside the viewport.

tsx

<NavigationMenu renderViewport={false}>
  <ScrollArea>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink>Link</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
    <ScrollBar />
  </ScrollArea>
  <NavigationMenuViewport containerProps={{ className: 'w-full' }} />
</NavigationMenu>