See all posts

How to create Tailwind CSS dropdown

By Emmanuel Chinonso - Frontend Engineer and Technical Writer at Windframe

How to create Tailwind CSS dropdown

Tailwind CSS is a powerful and versatile tool that can help you create visually appealing and feature-rich websites. One of the most popular features of Tailwind is its ability to create dropdown menus. Dropdowns allow you to provide additional content to users without taking up too much space on the page. In this blog, we will walk through the steps to create a Tailwind CSS dropdown menu.

Table of content

  • Installing Tailwind CSS
  • Setting up the Html Structure.
  • Adding the Classes to the Tailwind dropdown
  • Overview of Tailwind CSS dropdown menu
  • Conclusion

Installing Tailwind CSS

We have to install Tailwind CSS before we can start building our Tailwind dropdown menu. There are many ways you can do this. You can check our post here to understand it better.

Setting up the Html Structure.

The first step to creating a Tailwind CSS dropdown is setting up the HTML structure. You will need to create a div container with a class of “dropdown”. Inside this div, you should create two other divs, one for the dropdown trigger and one for the dropdown menu. The trigger div should contain an anchor tag with an id, class, and aria-haspopup attribute. The menu div should contain a list of links, each with its own class of “dropdown-item”.

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>Drop down meanu</title>
8    <link rel="stylesheet" href="style.css" />
9  </head>
10  <body>
11    <div>
12    <div>
13        <button
14            >Dropdown
15            <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
16                fill="currentColor"><path fill-rule="evenodd"
17                    d="M5.293 7.293a1 1 0 011.414 0L10
18                    10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
19                    clip-rule="evenodd" /></svg>
20        </button>
21        <div>
22        </div>
23

24        <div >
25            <a href="#" >
26                your profile
27            </a>
28            <a href="#" >
29                Your projects
30            </a>
31            <a href="#">
32                Help
33            </a>
34            <a href="#" >
35                Settings
36            </a>
37            <a href="#" >
38                Sign Out
39            </a>
40        </div>
41    </div>
42</div>
43

44</body>
45</html>
46  </body>
47</html>

In the code above, we added the link to the Tailwind CSS stylesheet file. Which we have already installed and set up as the style.css file. The necessary divs and struture for our Tailwind dropdown menu was also set up.

Adding the Classes to the Tailwind dropdown

Since the skeleton has been created and you have placed the necessary divs, it will be wise now to add some classes to the Tailwind dropdown. These Tailwind classes allow for your designs and dropdowns to occur smoothly. The Javascript required for these functions to happen was also included at the bottom of the Html file.

HTML
1<div class="flex justify-center h-screen">
2    <div x-data="{ dropdownOpen: true }" class="relative my-32">
3        <button @click="dropdownOpen = !dropdownOpen"
4            class="relative z-10 block rounded-md p-2
5            bg-blue-600 text-gray-200
6             px-6 text-sm py-3 overflow-hidden focus:outline-none focus:border-white">Dropdown
7            <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
8                fill="currentColor"><path fill-rule="evenodd"
9                    d="M5.293 7.293a1 1 0 011.414 0L10
10                    10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
11                    clip-rule="evenodd" /></svg>
12        </button>
13

14        <div x-show="dropdownOpen" @click="dropdownOpen = false" class="fixed inset-0 h-full w-full z-10">
15

16        </div>
17

18        <div x-show="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md
19        shadow-xl z-20">
20            <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500
21            hover:text-white">
22                your profile
23            </a>
24            <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500
25            hover:text-white">
26                Your projects
27            </a>
28            <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500
29            hover:text-white">
30                Help
31            </a>
32            <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500
33            hover:text-white">
34                Settings
35            </a>
36            <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500
37            hover:text-white">
38                Sign Out
39            </a>
40        </div>
41    </div>
42</div>
43<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
44</body>
45</html>

In the code above, we had the Tailwind dropdown menu set up along with the necessary Tailwind CSS classes.

Overview of Tailwind CSS dropdown menu

Our entire code will look like the code below

HTML
1<!DOCTYPE html>
2<html lang="en">
3	<head>
4		<meta charset="UTF-8" />
5		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7		<title>Drop down meanu</title>
8		<link rel="stylesheet" href="style.css" />
9	</head>
10	<body>
11		<div class="flex justify-center h-screen">
12			<div x-data="{ dropdownOpen: true }" class="relative my-32">
13				<button
14					@click="dropdownOpen = !dropdownOpen"
15					class="relative z-10 block rounded-md p-2  
16          bg-blue-600
17           text-gray-200  px-6 text-sm py-3 overflow-hidden 
18           focus:outline-none focus:border-white"
19				>
20					Dropdown
21					<svg
22						class="h-5 w-5 text-gray-800"
23						xmlns="http://www.w3.org/2000/svg"
24						viewBox="0 0 20 20"
25						fill="currentColor"
26					>
27						<path
28							fill-rule="evenodd"
29							d="M5.293 7.293a1 1 0 011.414 0L10 
30              10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
31							clip-rule="evenodd"
32						/>
33					</svg>
34				</button>
35

36				<div
37					x-show="dropdownOpen"
38					@click="dropdownOpen = false"
39					class="fixed inset-0 h-full w-full z-10"
40				></div>
41

42				<div
43					x-show="dropdownOpen"
44					class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20"
45				>
46					<a
47						href="#"
48						class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500 hover:text-white"
49					>
50						your profile
51					</a>
52					<a
53						href="#"
54						class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500 hover:text-white"
55					>
56						Your projects
57					</a>
58					<a
59						href="#"
60						class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500 hover:text-white"
61					>
62						Help
63					</a>
64					<a
65						href="#"
66						class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500 hover:text-white"
67					>
68						Settings
69					</a>
70					<a
71						href="#"
72						class="block px-4 py-2 text-sm capitalize text-gray-800 hover:bg-indigo-500 hover:text-white"
73					>
74						Sign Out
75					</a>
76				</div>
77			</div>
78		</div>
79		<script
80			src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
81			defer
82		></script>
83	</body>
84</html>

The Tailwind CSS dropdown menu will like the images below.

dropdown

once you click on the dropdown button, you will see the list on the dropdown. Just like the image below.

dropdown

Conclusion

The Tailwind CSS dropdown menu will certainly come in handy when building some navigation for your web applications. In this article, we explored an example of how to build a Tailwind CSS dropdown menu with Tailwind CSS.

Back to blog posts

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe