Home
Emrys11
Nested dropdown

Nested dropdown

Nested dropdown without using javascript. It uses details and summary HTML tags for interactivity.

This tailwind example is contributed by Emrys11, on 23-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Dropdown

Author Emrys11

14.3k

Fork Fullscreen

<div class="p-4 max-w-lg mx-auto mt-24">
    <details class="mb-2">
        <summary class="bg-gray-200 p-4 rounded-lg cursor-pointer shadow-md mb-4">
            <span class="font-semibold">Main Dropdown</span>
        </summary>
        <ul class="ml-8 space-y-4">
            <li>
                <details class="mb-2">
                    <summary class="bg-gray-100 p-3 rounded-lg cursor-pointer shadow">
                        <span class="font-semibold">Nested Dropdown 1</span>
                    </summary>
                    <div class="bg-white p-4">
                        <p class="text-gray-800">Content for Nested Dropdown 1</p>
                    </div>
                </details>
            </li>
            <li>
                <details class="mb-2">
                    <summary class="bg-gray-100 p-3 rounded-lg cursor-pointer shadow">
                        <span class="font-semibold">Nested Dropdown 2</span>
                    </summary>
                    <div class="bg-white p-4">
                        <p class="text-gray-800">Content for Nested Dropdown 2</p>
                    </div>
                </details>
            </li>
            <li>
                <details class="mb-2">
                    <summary class="bg-gray-100 p-3 rounded-lg cursor-pointer shadow">
                        <span class="font-semibold">Nested Dropdown 3</span>
                    </summary>
                    <div class="bg-white p-4">
                        <p class="text-gray-800">Content for Nested Dropdown 3</p>
                    </div>
                </details>
            </li>
        </ul>
    </details>

<details class="mb-2">
        <summary class="bg-gray-200 p-4 rounded-lg cursor-pointer shadow-md mb-4">
            <span class="font-semibold">Another Dropdown</span>
        </summary>
        <ul class="ml-8 space-y-4">
            <li>
                <details class="mb-2">
                    <summary class="bg-gray-100 p-3 rounded-lg cursor-pointer shadow">
                        <span class="font-semibold">Nested Item 1</span>
                    </summary>
                    <div class="bg-white p-4">
                        <p class="text-gray-800">Content for Nested Item 1</p>
                    </div>
                </details>
            </li>
            <li>
                <details class="mb-2">
                    <summary class="bg-gray-100 p-3 rounded-lg cursor-pointer shadow">
                        <span class="font-semibold">Nested Item 2</span>
                    </summary>
                    <div class="bg-white p-4">
                        <p class="text-gray-800">Content for Nested Item 2</p>
                    </div>
                </details>
            </li>
        </ul>
    </details>
</div>

Related Examples

Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

2 years ago

20.1k
Dropdown select on hover
this example does not uses javascript

Author:
Alok

2 years ago

29.3k
Dropdown menu without using javascript
Open the dropdown menu on hover

Author:
Asher Wilde

2 years ago

19.3k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

17.8k
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

1 year ago

5.7k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

7 months ago

1.4k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

7 months ago

966
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
SANJAY SINGH GARIYA

4 months ago

447
Dropdown profile
Using DaisyUI Based on: https://tailwindcomponents.com/component/dropdown-7

Author:
Dmitry

1 year ago

5.8k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

11 months ago

1.8k
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

1 year ago

2.1k
Material 3 Menu [Light]
A menu that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

4 months ago

203

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components