Navigation Menu

A collection of links for navigating websites.

Preview

• Getting started
• Components
• Documentation

Code

'use client'

import NavigationMenu, { NavigationMenuPrimitive } from '@dinui/react/navigation-menu'
import Skeleton from '@dinui/react/skeleton'

const components: { title: string; href: string; description: string }[] = [
  {
    title: 'Alert Dialog',
    href: '/docs/primitives/alert-dialog',
    description:
      'A modal dialog that interrupts the user with important content and expects a response.',
  },
  {
    title: 'Hover Card',
    href: '/docs/primitives/hover-card',
    description: 'For sighted users to preview content available behind a link.',
  },
  {
    title: 'Progress',
    href: '/docs/primitives/progress',
    description:
      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
  },
  {
    title: 'Scroll-area',
    href: '/docs/primitives/scroll-area',
    description: 'Visually or semantically separates content.',
  },
  {
    title: 'Tabs',
    href: '/docs/primitives/tabs',
    description:
      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
  },
  {
    title: 'Tooltip',
    href: '/docs/primitives/tooltip',
    description:
      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
  },
]

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenu.Item>
        <NavigationMenu.Trigger>Getting started</NavigationMenu.Trigger>
        <NavigationMenu.Content>
          <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
            <li className="row-span-3">
              <NavigationMenuPrimitive.Link asChild>
                <a
                  className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-bg--active/30 to-bg--active/70 p-6"
                  href="#"
                >
                  <Skeleton className="size-6" />
                  <div className="mb-2 mt-4 text-lg font-medium">DinUI</div>
                  <p className="text-sm leading-tight text-fg-weaker">
                    Beautifully designed components built with Radix UI and Tailwind CSS.
                  </p>
                </a>
              </NavigationMenuPrimitive.Link>
            </li>
            <NavigationMenu.Link href="#" title="Introduction">
              Introduction
              <NavigationMenu.Link.Description>
                Re-usable components built using Radix UI and Tailwind CSS.
              </NavigationMenu.Link.Description>
            </NavigationMenu.Link>
            <NavigationMenu.Link href="#">
              Installation
              <NavigationMenu.Link.Description>
                How to install dependencies and structure your app.
              </NavigationMenu.Link.Description>
            </NavigationMenu.Link>
            <NavigationMenu.Link href="#">
              Typography
              <NavigationMenu.Link.Description>
                Styles for headings, paragraphs, lists...etc
              </NavigationMenu.Link.Description>
            </NavigationMenu.Link>
          </ul>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item>
        <NavigationMenu.Trigger>Components</NavigationMenu.Trigger>
        <NavigationMenu.Content>
          <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
            {components.map((component) => (
              <NavigationMenu.Link key={component.title} href={component.href}>
                {component.title}
                <NavigationMenu.Link.Description>
                  {component.description}
                </NavigationMenu.Link.Description>
              </NavigationMenu.Link>
            ))}
          </ul>
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.LinkItem href="#">Documentation</NavigationMenu.LinkItem>
    </NavigationMenu>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add navigation-menu

   yarn

   yarn dlx @dinui/cli@latest add navigation-menu

   pnpm

   pnpm dlx @dinui/cli@latest add navigation-menu

   bun

   bunx @dinui/cli@latest add navigation-menu

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-navigation-menu @tabler/icons-react tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-navigation-menu @tabler/icons-react tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-navigation-menu @tabler/icons-react tailwind-variants type-fest

   bun

   bun add @radix-ui/react-navigation-menu @tabler/icons-react tailwind-variants type-fest

3. Copy and paste the following code into your project

   import { button } from '@dinui/react/button'
   import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
   import { IconChevronDown } from '@tabler/icons-react'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const navigationMenu = tv({
     slots: {
       root: 'relative',
       list: 'flex items-center gap-1',
       viewport: [
         'transition-all absolute right-1/2 translate-x-1/2 top-full mt-1.5 z-10',
         'origin-top-center overflow-hidden h-[var(--radix-navigation-menu-viewport-height)] w-full md:w-[var(--radix-navigation-menu-viewport-width)]',
         'rounded-md border bg-bg--contrast shadow',
         'data-[state=open]:animate-in data-[state=open]:slide-in-from-right-1/2',
         'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-1/2',
         'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90',
       ],
       trigger: button({ variant: 'ghost' }).root({
         className: ['group data-[state=open]:bg-bg--active'],
       }),
       triggerIcon: button({ variant: 'ghost' }).rightIcon({
         className: ['transition duration-300 group-data-[state=open]:rotate-180'],
       }),
       content: [
         'absolute left-0 top-0 w-full md:w-auto',
         'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out',
         'data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out',
         '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',
       ],
       indicator: [
         'transition duration-300 data-[state=visible]:animate-in data-[state=hidden]:animate-out',
         'top-full z-[11] flex h-1.5 items-end justify-center data-[state=hidden]:fade-out data-[state=visible]:fade-in',
         'after:content-[""] after:relative after:top-2/3 after:size-2 after:rotate-45',
         'after:rounded-tl-sm after:bg-bg--contrast after:border-t after:border-l',
       ],
       link: 'text-sm font-medium leading-none block select-none rounded-md p-3 leading-none transition-colors hover:bg-bg--hover data-[active]:bg-bg--active',
       linkDescription: 'mt-1 line-clamp-2 text-sm leading-snug text-fg-weaker',
     },
   })
   
   const NavigationMenuRoot = forwardRef<
     React.ElementRef<typeof NavigationMenuPrimitive.List>,
     Merge<
       React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>,
       {
         listProps?: React.ComponentProps<typeof NavigationMenuPrimitive.List>
         viewportProps?: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>
         indicatorProps?: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>
       }
     >
   >(({ listProps, viewportProps, indicatorProps, children, ...props }, ref) => {
     const { root, list, viewport, indicator } = navigationMenu()
   
     return (
       <NavigationMenuPrimitive.Root
         {...props}
         ref={ref}
         className={root({ className: props.className })}
       >
         <NavigationMenuPrimitive.List
           {...listProps}
           className={list({ className: listProps?.className })}
         >
           {children}
   
           <NavigationMenuPrimitive.Indicator
             {...indicatorProps}
             className={indicator({ className: indicatorProps?.className })}
           />
         </NavigationMenuPrimitive.List>
   
         <NavigationMenuPrimitive.Viewport
           {...viewportProps}
           className={viewport({ className: viewportProps?.className })}
         />
       </NavigationMenuPrimitive.Root>
     )
   })
   NavigationMenuRoot.displayName = NavigationMenuPrimitive.Root.displayName
   
   const NavigationMenuTrigger = forwardRef<
     React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
     Merge<
       React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>,
       {
         iconProps?: React.ComponentProps<typeof IconChevronDown>
       }
     >
   >(({ iconProps, children, ...props }, ref) => {
     const { trigger, triggerIcon } = navigationMenu()
   
     return (
       <NavigationMenuPrimitive.Trigger
         {...props}
         ref={ref}
         className={trigger({ className: props.className })}
       >
         {children}
   
         <IconChevronDown
           aria-hidden="true"
           {...iconProps}
           className={triggerIcon({ className: iconProps?.className })}
         />
       </NavigationMenuPrimitive.Trigger>
     )
   })
   NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
   
   const NavigationMenuLinkItem = forwardRef<
     React.ElementRef<typeof NavigationMenuPrimitive.Link>,
     Merge<
       React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link>,
       {
         itemProps?: React.ComponentProps<typeof NavigationMenuPrimitive.Item>
       }
     >
   >(({ itemProps, ...props }, ref) => {
     const { trigger } = navigationMenu()
   
     return (
       <NavigationMenuPrimitive.Item {...itemProps}>
         <NavigationMenuPrimitive.Link
           {...props}
           ref={ref}
           className={trigger({ className: props.className })}
         />
       </NavigationMenuPrimitive.Item>
     )
   })
   NavigationMenuLinkItem.displayName = 'NavigationMenuLinkItem'
   
   const NavigationMenuLink = forwardRef<
     React.ElementRef<typeof NavigationMenuPrimitive.Link>,
     React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link>
   >((props, ref) => {
     const { link } = navigationMenu()
   
     return (
       <NavigationMenuPrimitive.Link
         {...props}
         ref={ref}
         className={link({ className: props.className })}
       />
     )
   })
   NavigationMenuLink.displayName = 'NavigationMenuLink'
   
   const NavigationMenuLinkDescription = forwardRef<
     React.ElementRef<'p'>,
     React.ComponentPropsWithoutRef<'p'>
   >((props, ref) => {
     const { linkDescription } = navigationMenu()
   
     return <p {...props} ref={ref} className={linkDescription({ className: props.className })} />
   })
   NavigationMenuLinkDescription.displayName = 'NavigationMenuLinkDescription'
   
   const NavigationMenuContent = forwardRef<
     React.ElementRef<typeof NavigationMenuPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
   >((props, ref) => {
     const { content } = navigationMenu()
   
     return (
       <NavigationMenuPrimitive.Content
         {...props}
         ref={ref}
         className={content({ className: props.className })}
       />
     )
   })
   NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
   
   const NavigationMenu = Object.assign(NavigationMenuRoot, {
     Item: NavigationMenuPrimitive.Item,
     LinkItem: NavigationMenuLinkItem,
     Trigger: NavigationMenuTrigger,
     Content: NavigationMenuContent,
     Link: Object.assign(NavigationMenuLink, {
       Description: NavigationMenuLinkDescription,
     }),
   })
   
   export default NavigationMenu
   export { navigationMenu, NavigationMenuPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.