Home
Asher Wilde
Dropdown menu without using javascript

Dropdown menu without using javascript

Open the dropdown menu on hover

This tailwind example is contributed by Asher Wilde, on 15-May-2023. Component is made with Tailwind CSS v3. It is responsive.

Dropdown

Author Asher Wilde

19k

Fork Fullscreen

<div
            class="absolute left-0 w-40 mt-1 origin-top-left bg-white divide-y divide-gray-100 rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition duration-300">
            <div class="py-1">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Option 1</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Option 2</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Option 3</a>
            </div>
        </div>
    </div>
</div>

Related Examples

Dropdown select on hover
this example does not uses javascript

Author:
Alok

2 years ago

28.5k
Onhover Dropdown
Open dropdown on hover

Author:
Akshay

3 years ago

17.5k
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

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

Author:
Emrys11

2 years ago

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

Author:
Shariar Hasan

1 year ago

5.3k
Tailwind spinner
loading spinner component

Author:
Arya

2 years ago

38.6k
Dropdown
hover dropdown with width of max-w-7xl

Author:
Bernard Omuse

10 months ago

1.2k
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

4 months ago

733
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

4 months ago

1.2k
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:
Maxim

7 months ago

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

Author:
Thomas Taylor

1 year ago

1.8k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

6 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components