[Feature Request] OnHover in DropDown

[devappsms]

Is your feature request related to a problem? Please describe.

Is there any possibility to add hover as option on MenuTriggerType in Dropdown. or do we have any work around for this.

Describe the solution you'd like

Dropdown to show the menus/options while hover over the Dropdown

Describe alternatives you've considered

NA

Screenshots or Videos

No response

[m-naeem66622]

I think there should include an option in dropdown to view options on hover too instead of clicking it. These types of dropdowns will be helpful in navbar to show different categories by hovering on it rather than clicking.

[gustaveWPM]

Oops, I made a similar post. :x
#1806

[timomedia]

I also hope to add this option to the dropdown

[cairumeng]

I use Tooltip and Listbox, it seems work fine for me

[rwchampin]

This medium article shows how to toggle the Dropdown menu on hover. Toggle NextUI Dropdown Menu on Hover

[rwchampin]

This medium article shows how to toggle the Dropdown menu on hover. Toggle NextUI Dropdown Menu on Hover

[doseeing]

Toggle dropdown solution based on Toggle NextUI Dropdown Menu on Hover, fix menu disappear when move cursor from dropdown trigger to dropdown menu.

"use client";

import {
  DropdownItem,
  DropdownTrigger,
  Dropdown,
  DropdownMenu,
  Avatar,
  DropdownSection,
} from "@nextui-org/react";

import { useState } from "react";

export const HoverDropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [timeoutId, setTimeoutId] = useState<any>(null);
  const delay = 1000;
  return (
    <Dropdown isOpen={isOpen}>
      <DropdownTrigger>
        <Button
          onMouseEnter={() => {
            clearTimeout(timeoutId);
            setIsOpen(true);
          }}
          onMouseLeave={() => {
            const id = setTimeout(() => setIsOpen(false), delay);
            setTimeoutId(id);
          }}
        >Hover Me</Button> 
      </DropdownTrigger>
      <DropdownMenu
        aria-label="Profile Actions"
        variant="flat"
        onMouseEnter={() => {
          clearTimeout(timeoutId);
          setIsOpen(true);
        }}
        onMouseLeave={() => {
          setIsOpen(false);
        }}
      >
          <DropdownItem key="profile" className="h-14 gap-2">
            <p className="font-semibold">Signed in as</p>
            <p className="font-semibold">zoey@example.com</p>
          </DropdownItem>
          <DropdownItem key="settings">My Settings</DropdownItem>
          <DropdownItem key="team_settings">Team Settings</DropdownItem>
          <DropdownItem key="analytics">Analytics</DropdownItem>
          <DropdownItem key="system">System</DropdownItem>
          <DropdownItem key="configurations">Configurations</DropdownItem>
          <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
          <DropdownItem key="logout" color="danger">
            Log Out
          </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
};

[embium]

Anyone have any ideas on how to make this a multilevel dropdown menu?