Nested navigation menus in shadcn?

[thetanaz]

My goal is to have the shadcn Navigation menu display categories vertically and then when the user hovers on those categories they display subcategories horizontally

Here's a visual example. Whenever I try to nest one menu into another the second menu does not display it's content.

           <NavigationMenu className="relative">
                    <NavigationMenuList>
                        <NavigationMenuItem>
                            <NavigationMenuTrigger className="bg-primary">
                                Computer Components
                            </NavigationMenuTrigger>
                            <NavigationMenuContent>
                                <NavigationMenu>
                                    <NavigationMenuList>
                                        <NavigationMenuItem className="relative">
                                            <NavigationMenuTrigger className="bg-primary">
                                                GPUs
                                            </NavigationMenuTrigger>
                                            <NavigationMenuContent className="absolute right-50 top-0 w-[100px]">
                                                <NavigationMenuLink className="w-[50px]">
                                                    <Button>hello</Button>
                                                </NavigationMenuLink>
                                            </NavigationMenuContent>
                                        </NavigationMenuItem>
                                    </NavigationMenuList>
                                </NavigationMenu>
                            </NavigationMenuContent>
                        </NavigationMenuItem>
                    </NavigationMenuList>
                </NavigationMenu>

[itaim18]

The building blocks for nested menu should look something like this:

<NavigationMenu className="flex flex-col top-0 place-content-start content-start">
        <NavigationMenuList className="relative">
          <NavigationMenuItem>
            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                <li className="row-span-3">
                  <NavigationMenuLink asChild>

                    {/* This is the nested menu */}

                    <NavigationMenu className="flex flex-col top-0 place-content-start content-start">
                      <NavigationMenuList className="relative">
                        <NavigationMenuItem>
                          <NavigationMenuTrigger>shadcn</NavigationMenuTrigger>
                          <NavigationMenuContent>
                            <div> hi</div>
                          </NavigationMenuContent>
                        </NavigationMenuItem>
                      </NavigationMenuList>
                    </NavigationMenu>


                  </NavigationMenuLink>
                </li>
                <ListItem href="/docs" title="Introduction">
                  Re-usable components built using Radix UI and Tailwind CSS.
                </ListItem>
                <ListItem href="/docs/installation" title="Installation">
                  How to install dependencies and structure your app.
                </ListItem>
                <ListItem href="/docs/primitives/typography" title="Typography">
                  Styles for headings, paragraphs, lists...etc
                </ListItem>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div> hi</div>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <Link href="/docs" legacyBehavior passHref>
              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                Documentation
              </NavigationMenuLink>
            </Link>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>

manipulated the DOCS to fulfill nested navigation menu, obviously styling is neccessery but the required content is shown, tell me how it works out and if u need further help :)

[thetanaz]

Where are you getting the ListItem component from?

[itaim18]

oops, thought I made it clear that this is from the docs: https://ui.shadcn.com/docs/components/navigation-menu
in the code tab.
Here is the component, as written in the docs, anyaway:

const ListItem = React.forwardRef<
  React.ElementRef<"a">,
  React.ComponentPropsWithoutRef<"a">
>(({ className, title, children, ...props }, ref) => {
  return (
    <li>
      <NavigationMenuLink asChild>
        <a
          ref={ref}
          className={cn(
            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
            className
          )}
          {...props}
        >
          <div className="text-sm font-medium leading-none">{title}</div>
          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
            {children}
          </p>
        </a>
      </NavigationMenuLink>
    </li>
  )
})
ListItem.displayName = "ListItem"

[haiffy420]

Hi, have you find a way to create this deep nested navigation menu items? i tried @itaim18 suggestion but it doesn't work if the nest is too deep, the nav content immediately disspear as soon as i hover the trigger. i ended up using dropdown menu, i customized it so it can open on hover but it's still buggy

[thetanaz]

I believe the issues stems for the fact that somehow the state is shared between each NavigationMenu in order to not have bugs when navigating between separate navigation menus and have one stuck open. So when you nest them and you try to expand a sub navigation menu inside an existing one the state forces both closed (or something of that nature). One solution would be to manually create sub-menus inside the navigation menus, and while not ideal that's what I went for.

[haiffy420]

i found a way you might find ideal, i removed the 'overflow-hidden' in shadcn's navigation-menu.tsx file, then:

<NavigationMenu
            delayDuration={100}
            className="hidden lg:flex items-center justify-normal overflow-visible"
          >
            <NavigationMenuList className="space-x-4">
              <NavigationMenuItem>
                <NavigationMenuTrigger className="bg-transparent hover:bg-transparent focus:bg-transparent dark:focus:bg-transparent data-[state=open]:bg-transparent">
                  Getting started
                </NavigationMenuTrigger>
                <NavigationMenuContent className="bg-inherit">
                  <ul className="bg-inherit grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                    <li className="row-span-3">
                      <NavigationMenuLink asChild>
                        <NavigationMenu className="flex flex-col top-0 place-content-start content-start">
                          <NavigationMenuList className="relative">
                            <NavigationMenuItem>
                              <NavigationMenuTrigger className="bg-transparent dark:hover:bg-gray-700 dark:focus:bg-gray-700 dark:data-[state=open]:bg-gray-700 gap-3 text-base text-dark hover:text-primary dark:text-white/70 dark:hover:text-white font-semibold">
                                Getting started
                              </NavigationMenuTrigger>
                              <NavigationMenuContent>
                                <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                                  <li className="row-span-3">
                                    <NavigationMenuLink asChild>
                                      <NavigationMenu className="flex flex-col top-0 place-content-start content-start">
                                        <NavigationMenuList className="relative">
                                          <NavigationMenuItem>
                                            <NavigationMenuTrigger className="bg-transparent dark:hover:bg-gray-700 dark:focus:bg-gray-700 dark:data-[state=open]:bg-gray-700 gap-3 text-base text-dark hover:text-primary dark:text-white/70 dark:hover:text-white font-semibold">
                                              Getting started
                                            </NavigationMenuTrigger>
                                            <NavigationMenuContent>
                                              <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                                                <li className="row-span-3">
                                                  <NavigationMenuLink asChild>
                                                    <NavigationMenu className="flex flex-col top-0 place-content-start content-start">
                                                      <NavigationMenuList className="relative"></NavigationMenuList>
                                                    </NavigationMenu>
                                                  </NavigationMenuLink>
                                                </li>
                                              </ul>
                                            </NavigationMenuContent>
                                          </NavigationMenuItem>
                                        </NavigationMenuList>
                                      </NavigationMenu>
                                    </NavigationMenuLink>
                                  </li>
                                </ul>
                              </NavigationMenuContent>
                            </NavigationMenuItem>
                          </NavigationMenuList>
                        </NavigationMenu>
                      </NavigationMenuLink>
                    </li>
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>

the overflow-hidden class is found in navigationmenu.viewport but since i cant find where to place the <NavigationMenuViewport/> component in the shadcn docs, i just modify the navigation-menu.tsx file

[lynndylanhurley]

@haiffy420 how were you able to customize the DropdownMenu to open on hover? I tried this but it's really buggy:

const DropdownMenuHoverTrigger = (props: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>) => {
  const ref = React.useRef<HTMLButtonElement>(null);
  const handleHoverEnter = () => {
    if (ref.current) {
      const clickEvent = new PointerEvent('pointerdown', {
        bubbles: true,
        cancelable: true
      });
      ref.current.dispatchEvent(clickEvent)
    }
  };

  return <DropdownMenuTrigger 
    ref={ref} 
    onMouseEnter={handleHoverEnter}
    {...props} 
  />;
};

For example, it doesn't close on mouseout, and gets confused if there are other dropdowns on the page. The NavigationMenu seems to have logic that accounts for these issues, but I can't figure out how to render the nested dropdown menu with that component.

[haiffy420]

@lynndylanhurley

i ended up using dropdown menu, i customized it so it can open on hover but it's still buggy

Sorry, i clearly stated here that i also ran into issues when trying to make hover-able dropdown menu, it's roughly the same issue as yours. So, instead of using dropdown or navigation menu item, use a hover card instead. It works wonderfully. Just need to do some tweaking like the open/close delay, position, etc. Just note that hover card doesn't work on mobile so i still use dropdown menu for that.

[lynndylanhurley]

Ah got it. Thanks @haiffy420

[aminezouari52]

I tried using the popover component from shadcn, to recursively display nested categories, however each category needs to have this format

interface Category {
  title: string;
  children: Category[] | [];
}

Will look something like this

Imports

import { useState } from "react";
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuList,
} from "@/components/ui/navigation-menu";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

State of the menu

const [openMenu, setOpenMenu] = useState(false);

Navigation Menu

<NavigationMenuList>
  <NavigationMenuItem className="flex items-center">
    <Popover open={openMenu} onOpenChange={setOpenMenu}>
      <PopoverTrigger asChild>
        <div className="flex items-center gap-2 text-neutral-900" onMouseEnter={()=>
          setOpenMenu(true)} >
          <div className="text-xs">
            Categories
          </div>
        </div>
      </PopoverTrigger>
      <PopoverContent className="w-56 p-0 m-0 rounded-md border-none" side="bottom"
      onMouseLeave={()=>
        { setOpenMenu(false); }} >
        <div className="flex flex-col bg-neutral-200 rounded-md">
          {categories?.map( (category, index) => (
          <MenuItem key={index} category={category} />
          ), )}
        </div>
      </PopoverContent>
    </Popover>
  </NavigationMenuItem>
</NavigationMenuList>

Menu Item

function MenuItem({ category, depth = 0 }: any) {
  const [open, setOpen] = useState(false);
  const hasChildren = !!category.children?.length;

  return (
    <div
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
      className="relative bg-neutral-200 flex flex-col rounded-md"
    >
      <Button
        variant="ghost"
        className="w-full justify-between pr-2 bg-neutral-200 hover:bg-gray-300 hover:text-neutral-800"
      >
        {category.title}
      </Button>

      {hasChildren && open && (
        <div className="absolute left-full top-0 w-48 rounded-md shadow z-50 hover:text-neutral-800 bg-neutral-200">
          {category.children!.map((child: any, i: number) => (
            <MenuItem key={i} category={child} depth={depth + 1} />
          ))}
        </div>
      )}
    </div>
  );
}