Dropdown menu list

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

This tailwind example is contributed by Prajwal Hallale, on 04-Mar-2023. Component is made with Tailwind v3.4. It is responsive.

Dropdown List

Author Prajwal Hallale

Tailwind v3.4 20.5k 21

Fork Fullscreen

<span>
                        Prajwal Hallale
                    </span>
                </span>
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
            </summary>

<a href="http://127.0.0.1:8000/user/dashboard">
                            Dashboard
                        </a>
                    </li>

<a href="http://127.0.0.1:8000/user/study-lists">
                            Study Lists
                        </a>
                    </li>

<a href="http://127.0.0.1:8000/user/contribution">
                            Your contribution
                        </a>
                    </li>

<a href="http://127.0.0.1:8000/user/settings">
                            Settings
                        </a>
                    </li>

</ul>

</article>

</details>
    </li>

<span>
                        Recent Documents
                    </span>
                </span>
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>
            </summary>

<article class="px-4 pb-4">
                <ul class="flex flex-col gap-1 pl-2">
                    <li><a href="">Document title</a></li>
                    <li><a href="">Document title</a></li>
                    <li><a href="">Document title</a></li>
                </ul>
            </article>

</details>
    </li>

<span class="flex gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
                    </svg>
                    <span>
                        Popular courses
                    </span>
                </span>
                <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                    </path>
                </svg>

</summary>

<article class="px-4 pb-4">
                <ul class="flex flex-col gap-1 pl-2">
                    <li><a href="">Course title</a></li>
                    <li><a href="">Course title</a></li>
                    <li><a href="">Course title</a></li>
                </ul>
            </article>

</details>
    </li>

</ul>

Related Examples

Dropdown select on hover
this example does not uses javascript

Alok

3 years ago

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

Emrys11

3 years ago

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

Asher Wilde

3 years ago

20.3k
Nested list
A nested list is suitable for a table of contents / navigational list

Noob

4 years ago

21.8k
Onhover Dropdown
Open dropdown on hover

Akshay

4 years ago

19.3k
Nested list section
List with soft background colors. List with Hierarchy

Orion.c

3 years ago

12.4k
Hierarchy list

Anonymous

3 years ago

11.5k
Stacked list

Odessa Young

3 years ago

19.9k
Todo list template

Steven Kuhn

3 years ago

19.5k
Features list with icons

L.J. Weber

3 years ago

15.2k
Users ranking list

Leif99

3 years ago

17k
Sponsors section
icon grid

Sienna

3 years ago

13.9k
Item List with title
created by using fieldset and legend tags

Prashant

4 years ago

12.1k
Responsive list with icons

Prajwal Hallale

3 years ago

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

Shariar Hasan

2 years ago

7.1k
Responsive list

Sienna

3 years ago

12.8k
Table of content
Show list of Table of content

Anonymous

2 years ago

6.8k
Nested list

Lukas Müller

3 years ago

14.1k