Home
Prajwal Hallale
Dropdown menu list

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 CSS v3. It is responsive.

Dropdown List

Author Prajwal Hallale

20.1k

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