Can the dropdown have a hover effect too?

[Sandeep-Risal]

Can we implement the dropdown to have a hover effect to that when we hover over the trigger, the dropdown content is shown.

[pragyamishra56]

If it would be possible then can you assign me to this issue I want to resolve this

[Sandeep-Risal]

I am not being able to assign you this ticket, could you reply to this ticket once you've fixed this?

[pragyamishra56]

could you provide me a screenshot of the issue so that I can resolve it?

[Sandeep-Risal]

Its not more of a issue but i want the hover feature to be added in the dropdown. When i hover around the DropdownTrigger then i want DropdownContent to be displayed too.

[pragyamishra56]

@Sandeep13-web I understand now, and I'll work on resolving it as soon as possible. Is it possible to purchase additional time?

[Sandeep-Risal]

Sorry could'nt get what you said about the additional time? Did you mean it might take some time or?

[pragyamishra56]

@Sandeep13-web No, sir, I meant to say that I can create a pull request after resolving this issue. Firstly, let me know where the problem is, and then I'll give my best to address this issue in just a few hours.

[Sandeep-Risal]

the main thing that i want is whenever i hover in any items, a sub item as displayed in the screen should occur. Right now i clicked the item and then displayed but after i click in the items in the left, it immediately closes the option there.

[Sandeep-Risal]

i want the hover code to be here to that i can use it in my application. This was created when i installed the dropdown using the command given in the shadcn website.

[ezechuka]

@Sandeep13-web you can add this class to DropdownContent: hover:shadow-xl. You can change the xl to the amount of shadow you want.

[Sandeep-Risal]

it's not the shadow that i want, i want the whole DropdownContent to be displayed when the user hovers around the DropdownTrigger

[ezechuka]

@Sandeep13-web I suggest you use the NavigationMenu component. It should do exactly what you want. https://ui.shadcn.com/docs/components/navigation-menu

[Sandeep-Risal]

I have used the Navigation Menu component but i want the dropdown hover feature in the components inside the NavigationMenu. In my code i have used the Navigation menu which displays a list and there is also a sub-list which needs to be shown by hovering the items in the list.

[ItzaMi]

The dropdown trigger is supposed to act as a button so having a he trigger on mouse hover won't make much sense. However, you could implement it yourself by using asChild and creating an onMouseEnter event that changes the open state

[Sandeep-Risal]

Thankyou :D i will try this.

[prayush21]

@Sandeep13-web Did you try it out? I am also looking for similar feature where the on hovering over the trigger, the dropdown content is shown.

[Sandeep-Risal]

@prayush21 yes it did work. You could handle it with a state and onMouseEnter you could change the state.

[prayush21]

okay, thanks!

[cdt-eth]

@Sandeep13-web struggling with this, can you share your fix?

[husmaret]

@prayush21 yes it did work. You could handle it with a state and onMouseEnter you could change the state.

Hi, can you please share how you did it? For others like me who came across this issue

[Sandeep-Risal]

@cdt-eth , @husmaret

const [openDropdown, setOpenDropdown] = useState(false);
<DropdownMenu
        open={openDropdown}
        onOpenChange={() => setOpenDropdown(false)}
      >
        <DropdownMenuTrigger
          onMouseEnter={() => setOpenDropdown(true)}
          onMouseLeave={() => setOpenDropdown(false)}
        >
          Dropdown
        </DropdownMenuTrigger>
        <DropdownMenuContent>asd</DropdownMenuContent>
      </DropdownMenu>

[nijikokun]

@Sandeep13-web that will get you pretty close but not all the way, the content will not be hover-able. To fix this you must move the leave event onto the content section like so:

This also works with buttons.

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
import { Button } from "@/components/ui/button";
import { useTheme } from "next-themes";
import { useState } from "react";

export function ThemeToggle() {
  const { setTheme } = useTheme()
  const [openDropdown, setOpenDropdown] = useState(false);

  return (
    <DropdownMenu
      open={openDropdown}
      onOpenChange={() => setOpenDropdown(false)}
    >
      <DropdownMenuTrigger
        onMouseEnter={() => setOpenDropdown(true)}
        asChild>
        <Button variant="outline" size="icon">
          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent 
        onMouseLeave={() => setOpenDropdown(false)} 
        align="end"
      >
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

It would be nice if this was built in. The dropdown menu has a different look and feel than the navigation menu.

[createdbymahmood]

use HoverCard component instead.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.