Next/React Multi Layer Dropdown menu

Readul Ahmed answered on January 23, 2025 Popularity 6/10 Helpfulness 1/10

answer Next/React Multi Layer Dropdown menu

related c#, C# lists, list, generic collections

Next/React Multi Layer Dropdown menu

Comment

const [menus, setMenus] = useState([
    {
      id: 1,
      name: "Fashion",
      submenu: [
        {
          id: 121,
          name: "New Arrivals",
          submenu: [
            { id: 222, name: "Watches", submenu: null },
            { id: 223, name: "Shoes", submenu: null },
            { id: 224, name: "Bags", submenu: null },
            { id: 225, name: "Accessories", submenu: null },
            { id: 226, name: "Jwellary & Watches", submenu: null },
          ],
        },
        {
          id: 122,
          name: "Best Seller",
          submenu: [
            { id: 227, name: "Watches", submenu: null },
            { id: 228, name: "Shoes", submenu: null },
            { id: 229, name: "Bags", submenu: null },
            { id: 230, name: "Accessories", submenu: null },
            { id: 231, name: "Jwellary & Watches", submenu: null },
          ],
        },
        { id: 123, name: "Trending", submenu: null },
        { id: 124, name: "Clothing", submenu: null },
        { id: 125, name: "Shoes", submenu: null },
        { id: 126, name: "Bags", submenu: null },
        { id: 127, name: "Accessories", submenu: null },
        { id: 128, name: "Jwellary & Watches", submenu: null },
      ],
    },
    {
      id: 2,
      name: "Home & Garden",
      submenu: [
        { id: 231, name: "New Arrivals", submenu: null },
        { id: 232, name: "Best Seller", submenu: null },
        { id: 233, name: "Trending", submenu: null },
        { id: 234, name: "Furniture", submenu: null },
        { id: 235, name: "Decor", submenu: null },
        { id: 236, name: "Kitchenware", submenu: null },
        { id: 237, name: "Gardening", submenu: null },
        { id: 238, name: "Lighting", submenu: null },
      ],
    },
    {
      id: 3,
      name: "Electronics",
      submenu: [
        { id: 341, name: "Smartphones", submenu: null },
        { id: 342, name: "Laptops", submenu: null },
        { id: 343, name: "Tablets", submenu: null },
        { id: 344, name: "Accessories", submenu: null },
        { id: 345, name: "Cameras", submenu: null },
        { id: 346, name: "Audio", submenu: null },
        { id: 347, name: "Gaming", submenu: null },
        { id: 348, name: "Smart Home", submenu: null },
      ],
    },
    {
      id: 4,
      name: "Furniture",
      submenu: [
        { id: 451, name: "Living Room", submenu: null },
        { id: 452, name: "Bedroom", submenu: null },
        { id: 453, name: "Dining Room", submenu: null },
        { id: 454, name: "Office", submenu: null },
        { id: 455, name: "Outdoor", submenu: null },
      ],
    },
    {
      id: 5,
      name: "Health & Beauty",
      submenu: [
        { id: 561, name: "Skincare", submenu: null },
        { id: 562, name: "Makeup", submenu: null },
        { id: 563, name: "Hair Care", submenu: null },
        { id: 564, name: "Fragrances", submenu: null },
        { id: 565, name: "Personal Care", submenu: null },
        { id: 566, name: "Health & Wellness", submenu: null },
      ],
    },
    { id: 6, name: "Gift Ideas", submenu: null },
    { id: 7, name: "Toys & Games", submenu: null },
    { id: 8, name: "Cooking", submenu: null },
    { id: 9, name: "Smart Phones", submenu: null },
    { id: 10, name: "Cameras & Photo", submenu: null },
    { id: 11, name: "Accessories", submenu: null },
  ]);


// page.jsx 

 <main className="flex min-h-screen flex-col items-start justify-start p-24">
      <VerticalHoverDropdownMenu menus={menus} />
    </main>


// ======================  VerticalHoverDropdownMenu.js ===============================
"use client"

import React, { useState } from "react"
import { ChevronRight } from "lucide-react"

const MenuItem = ({ item, depth = 0 }) => {
  const [isHovered, setIsHovered] = useState(false)

  return (
    <li className="relative" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <div className={`flex items-center justify-between p-2 hover:bg-gray-100 ${depth === 0 ? "font-semibold" : ""}`}>
        <span>{item.name}</span>
        {item.submenu && <ChevronRight className="h-4 w-4" />}
      </div>
      {item.submenu && (
        <ul
          className={`absolute top-0 left-full min-w-[200px] bg-white shadow-md transition-all duration-300 ease-in-out ${
            isHovered ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-2"
          }`}
          style={{
            visibility: isHovered ? "visible" : "hidden",
          }}
        >
          {item.submenu.map((subItem) => (
            <MenuItem key={subItem.id} item={subItem} depth={depth + 1} />
          ))}
        </ul>
      )}
    </li>
  )
}

const VerticalHoverDropdownMenu = ({ menus }) => {
  return (
    <nav className="bg-white shadow-md w-64">
      <ul className="py-2">
        {menus.map((item) => (
          <MenuItem key={item.id} item={item} />
        ))}
      </ul>
    </nav>
  )
}

export default VerticalHoverDropdownMenu

Popularity 6/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: dropdown javascript menu multi-layer

Link to this answer
Share Copy Link

Contributed on Jan 24 2025

Readul Ahmed

0 Answers Avg Quality 2/10

Closely Related Answers

c#, C# lists, list, generic collections

Comment

How to initialize a list in C#, with existing array

int[] initialArray = { 1, 2, 3, 4 };
List<int> numbers = new List<int>(initialArray);

Popularity 8/10 Helpfulness 1/10 Language csharp

Source: google.com

Tags: c# generic-collections

Link to this answer
Share Copy Link

Contributed on Jan 23 2025

Cautious Caracal

0 Answers Avg Quality 2/10

Next/React Multi Layer Dropdown menu

Contents

More Related Answers

Next/React Multi Layer Dropdown menu

Closely Related Answers

c#, C# lists, list, generic collections

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.