Tailwind CSS Navigation
Let’s explore utility classes for working with navigation menus and dropdowns in Tailwind CSS.
Horizontal Navigation Menu:
You can create a horizontal navigation menu using flexbox utilities to align menu items horizontally.
1
2
3
4
5
6
<nav class="flex">
<a href="#" class="p-2">Home</a>
<a href="#" class="p-2">About</a>
<a href="#" class="p-2">Services</a>
<a href="#" class="p-2">Contact</a>
</nav>
Vertical Navigation Menu:
Similarly, you can create a vertical navigation menu using flexbox utilities to align menu items vertically.
1
2
3
4
5
6
<nav class="flex flex-col">
<a href="#" class="p-2">Home</a>
<a href="#" class="p-2">About</a>
<a href="#" class="p-2">Services</a>
<a href="#" class="p-2">Contact</a>
</nav>
Dropdown Menu:
You can create dropdown menus using nested lists and CSS. Tailwind CSS provides utility classes for styling dropdowns and managing their visibility.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<nav>
<ul class="flex">
<li>
<a href="#" class="p-2">Home</a>
</li>
<li>
<a href="#" class="p-2">About</a>
</li>
<li>
<a href="#" class="p-2">Services</a>
<ul class="absolute hidden bg-gray-100 p-2">
<li><a href="#" class="block">Service 1</a></li>
<li><a href="#" class="block">Service 2</a></li>
<li><a href="#" class="block">Service 3</a></li>
</ul>
</li>
<li>
<a href="#" class="p-2">Contact</a>
</li>
</ul>
</nav>
Responsive Navigation:
You can use responsive classes to create navigation menus that adapt to different screen sizes.
1
2
3
<nav class="flex flex-col lg:flex-row">
<!-- Menu items here -->
</nav>
These are some examples of how you can create navigation menus and dropdowns using Tailwind CSS utility classes. Experiment with these classes to create navigation structures that match your design requirements.
Here is full example code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Let's explore Tailwind CSS</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<!-- Your content goes here -->
<div class="container mx-auto py-6">
<h1 class="text-3xl font-bold text-center text-gray-800">Welcome! Let's walkthrough with Tailwind CSS</h1>
<p class="text-lg text-center text-gray-600">Let's explore Tailwind!</p>
</div>
<div class="container mx-auto py-6">
<p class="text-lg text-left text-gray-600 font-bold">Horizontal Nav</p>
<nav>
<ul class="flex">
<li>
<a href="#" class="p-2">Home</a>
</li>
<li>
<a href="#" class="p-2">About</a>
</li>
<li class="relative">
<a href="#" class="p-2">Services</a>
<ul class="dropdown-menu hidden bg-gray-100 absolute top-full left-0">
<li><a href="#" class="block p-2">Service 1</a></li>
<li><a href="#" class="block p-2">Service 2</a></li>
<li><a href="#" class="block p-2">Service 3</a></li>
</ul>
</li>
<li>
<a href="#" class="p-2">Contact</a>
</li>
</ul>
</nav>
<p class="text-lg text-left text-gray-600 font-bold">Vertical Nav</p>
<nav class="flex flex-col">
<a href="#" class="p-2">Home</a>
<a href="#" class="p-2">About</a>
<a href="#" class="p-2">Services</a>
<a href="#" class="p-2">Contact</a>
</nav>
</div>
<!-- JavaScript -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Get all dropdown toggle buttons
var dropdownToggleButtons = document.querySelectorAll('.relative > a');
// Add event listeners to toggle dropdown visibility
dropdownToggleButtons.forEach(function(button) {
button.addEventListener('click', function(event) {
event.preventDefault(); // Prevent default anchor behavior
var dropdownMenu = this.parentElement.querySelector('.dropdown-menu');
dropdownMenu.classList.toggle('hidden');
});
});
// Close dropdowns when clicking outside
document.addEventListener('click', function(event) {
if (!event.target.closest('.relative')) {
var dropdownMenus = document.querySelectorAll('.dropdown-menu');
dropdownMenus.forEach(function(menu) {
menu.classList.add('hidden');
});
}
});
});
</script>
</body>
</html>
This post is licensed under
CC BY 4.0
by the author.