Creating a smooth and responsive navigation menu is essential for building user-friendly websites. In this tutorial, we’ll build a Tailwind scroll navbar that enhances functionality and visual appeal. Our guide covers crafting a fully responsive navbar using Tailwind CSS, complete with a dynamic sidebar, dropdown menus, a search bar, and language selection options. We’ll integrate Bootstrap icons to elevate the design, creating an intuitive, interactive experience for users. This tutorial is ideal for developers aiming to build a scalable, mobile-first layout with Tailwind CSS.
Objective Off Tailwind Scroll Navbar
The goal of this tutorial is to guide you in creating a responsive Tailwind scroll navbar with a sidebar and dropdown functionality. You’ll learn to implement dynamic elements like a search bar, notification icons, and dropdown menus, building a seamless user experience. This step-by-step guide ensures a highly customizable, professional navigation system that adapts smoothly across all device sizes, making it an ideal solution for developers focused on responsive, modern design with Tailwind CSS.
Project Functionality
- Technology Use: HTML5, Tailwindcss
- External Resources: Bootstrap icon, Tailwind Css, Tailwind-scrollbar
- Responsive: Yes
Related Content You Might Enjoy
- Build a Responsive Tailwind CSS Navbar with a Dropdown Menu
- Responsive Sidebar with HTML & Tailwind CSS
- 30 Modern Menu Sidebar Examples with Source Code & Demos
- How to Create a Simple HTML Page with a Floating Navbar
- 15+ Creative TailwindUI Sticky Nav Examples
Source Code & Live Demo
To use this project source code effectively:
- Source Code: You can obtain the complete source code by copying the code provided below.
- Download: You can download the source code by clicking the Source Code button below to get a ZIP file of the project. Extract the contents to your desired directory.
- Open the Project: Open the project folder using a text editor or an integrated development environment (IDE) like Visual Studio Code.
- Install node_modules: open the project in VS Code, then open the terminal and run the command npm install -D tailwindcss.
- Modify and Experiment: Customize the content, styles, and functionalities to suit your preferences. Experiment with different design elements and JavaScript interactions to enhance your learning.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tailwind navigation menu</title>
<!-- bootstrap icons -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<!-- output css -->
<link rel="stylesheet" href="output.css" />
</head>
<body class="bg-neutral-900 w-full min-h-screen relative">
<!-- navbar -->
<nav
class="bg-slate-50 w-full h-16 px-4 sm:px-6 md:px-8 lg:px-14 flex justify-between items-center fixed">
<div class="flex items-center gap-12">
<!-- logo and toggle btn -->
<div class="flex items-center gap-8">
<div class="gap-2 hidden lg:flex" items-cenetr>
<i class="bi bi-code-slash text-4xl font-extrabold"></i>
<h1 class="text-3xl font-bold">SyntaxMart</h1>
</div>
<i
class="bi bi-menu-app text-3xl cursor-pointer hover:text-green-400"
id="sidebar-control"></i>
</div>
<!-- search option -->
<div class="hidden md:flex items-center gap-2">
<i
class="bi bi-search text-xl cursor-pointer hover:text-green-400"></i>
<input
type="search"
class="p-2.5 bg-transparent focus:outline-none"
placeholder="Start typing to search..." />
</div>
</div>
<!-- notification and account -->
<div class="flex items-center gap-8">
<div>
<select name="" id="" class="bg-transparent text-lg capitalize">
<option value="english">English</option>
<option value="bangla">Bangla</option>
<option value="arabic">Arabic</option>
</select>
</div>
<div class="flex items-center gap-6">
<i
class="bi bi-chat-left text-xl cursor-pointer hover:text-green-400"></i>
<i
class="bi bi-bell text-xl cursor-pointer hover:text-green-400"></i>
<div
class="flex items-center gap-2 cursor-pointer hover:text-green-400">
<i class="bi bi-person text-2xl"></i>
<span class="text-lg capitalize">hi, mamun</span>
</div>
</div>
</div>
</nav>
<!-- aside or sidebar -->
<aside
class="bg-slate-50 fixed top-16 bottom-0 left-0 w-[300px] shadow-md shadow-slate-50 py-8 px-6 space-y-10 overflow-y-auto scrollbar-none duration-500"
id="sidebar">
<!-- home pages -->
<div class="space-y-3">
<a
href="#"
class="dropdown-btn flex justify-between items-center bg-slate-200 rounded-md pr-2"
id="dropdown-home-btn">
<div class="flex gap-3 items-center">
<div class="w-10 h-10 flex justify-center items-center">
<i class="bi bi-house"></i>
</div>
<span class="capitalize font-semibold">home pages</span>
</div>
<i
class="bi bi-chevron-compact-right duration-300 transition-transform dropdown-arrow"
id="dropdown-home-arrow"></i>
</a>
<ul
class="list-none w-4/6 mx-auto space-y-2 overflow-hidden max-h-0 opacity-0 transition-all duration-500 ease-in-out dropdown-content"
id="dropdown-home">
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>home page 1</a
>
</li>
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>home page 2</a
>
</li>
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>home page 3</a
>
</li>
</ul>
</div>
<!-- community -->
<div>
<p class="capitalize text-semibold mb-5">community</p>
<div class="space-y-4">
<a
href="#"
class="flex gap-3 items-center w-full hover:text-green-700">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-file-text"></i>
</div>
<span class="capitalize font-semibold">knowledge base</span>
</a>
<a
href="#"
class="flex gap-3 items-center w-full hover:text-green-700">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-send-arrow-up"></i>
</div>
<span class="capitalize font-semibold">active</span>
</a>
<a
href="#"
class="flex gap-3 items-center w-full hover:text-green-700">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-envelope-paper"></i>
</div>
<span class="capitalize font-semibold">message</span>
</a>
<a
href="#"
class="flex gap-3 items-center w-full hover:text-green-700">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-people"></i>
</div>
<span class="capitalize font-semibold">members</span>
</a>
<a
href="#"
class="flex gap-3 items-center w-full hover:text-green-700">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-person-lines-fill"></i>
</div>
<span class="capitalize font-semibold">group</span>
</a>
<a
href="#"
class="flex gap-3 items-center w-full hover:text-green-700">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-chat"></i>
</div>
<span class="capitalize font-semibold">forums</span>
</a>
</div>
</div>
<!-- e-learning -->
<div>
<p class="capitalize text-semibold mb-5">e-learning</p>
<div class="space-y-4">
<div class="space-y-3">
<a
href="#"
class="dropdown-btn flex justify-between items-center hover:text-green-700">
<div class="flex gap-3 items-center">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-list-stars"></i>
</div>
<span class="capitalize font-semibold">learnDesh</span>
</div>
<i
class="bi bi-chevron-compact-right transition-transform dropdown-arrow"></i>
</a>
<ul
class="list-none w-4/6 mx-auto space-y-2 overflow-hidden max-h-0 opacity-0 transition-all duration-500 ease-in-out dropdown-content"
id="dropdown-home">
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- all courses</a
>
</li>
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- course single</a
>
</li>
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- lesson single</a
>
</li>
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- topic single</a
>
</li>
</ul>
</div>
<div class="space-y-3">
<a
href="#"
class="dropdown-btn flex justify-between items-center hover:text-green-700">
<div class="flex gap-3 items-center">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-lightbulb"></i>
</div>
<span class="capitalize font-semibold">learnPress</span>
</div>
<i
class="bi bi-chevron-compact-right transition-transform dropdown-arrow"></i>
</a>
<ul
class="list-none w-4/6 mx-auto space-y-2 overflow-hidden max-h-0 opacity-0 transition-all duration-500 ease-in-out dropdown-content"
id="dropdown-home">
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- all courses</a
>
</li>
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- course single</a
>
</li>
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- lesson single</a
>
</li>
</ul>
</div>
</div>
</div>
<!-- others -->
<div>
<p class="capitalize text-semibold mb-5">others</p>
<div class="space-y-4">
<div class="space-y-3">
<a
href="#"
class="dropdown-btn flex justify-between items-center hover:text-green-700">
<div class="flex gap-3 items-center">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-bag"></i>
</div>
<span class="capitalize font-semibold">membership</span>
</div>
<i
class="bi bi-chevron-compact-right transition-transform dropdown-arrow"></i>
</a>
<ul
class="list-none w-4/6 mx-auto space-y-2 overflow-hidden max-h-0 opacity-0 transition-all duration-500 ease-in-out dropdown-content"
id="dropdown-home">
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- pricings plans</a
>
</li>
<li>
<a
href="#"
class="capitalize text-slate-500 text-sm w-full block p-2 rounded-md hover:bg-slate-200"
>- restricted content</a
>
</li>
</ul>
</div>
<a href="#" class="flex gap-3 items-center hover:text-green-700">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-cart3"></i>
</div>
<span class="capitalize font-semibold">shop</span>
</a>
<a
href="#"
class="flex justify-between items-center hover:text-green-700">
<div class="flex gap-3 items-center">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-newspaper"></i>
</div>
<span class="capitalize font-semibold">news</span>
</div>
</a>
<a
href="#"
class="flex justify-between items-center hover:text-green-700">
<div class="flex gap-3 items-center">
<div
class="w-10 h-10 bg-slate-200 rounded-md flex justify-center items-center">
<i class="bi bi-pie-chart"></i>
</div>
<span class="capitalize font-semibold"
>charts & graph</span
>
</div>
</a>
</div>
</div>
</aside>
<main
class="flex flex-col gap-3 justify-center min-h-screen ml-[310px] pl-14 duration-500"
id="main-content">
<h1
class="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-bold capitalize text-orange-500">
tailwindcss responsive sidebar
</h1>
<h3 class="text-xl lg:text-2xl font-semibold text-white capitalize">
social deshbard with responsive sidebar
</h3>
<p class="text-lg text-yellow-50 w-5/6 md:w-4/6 xl:w-3/6">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio
voluptatibus perspiciatis nobis officiis atque a iusto temporibus
facere fugit. Architecto, quo? Eius dolores culpa sequi eum,
consectetur soluta praesentium possimus.
</p>
</main>
<!-- javascript link -->
<script src="script.js"></script>
</body>
</html>
const sidebarControll = document.getElementById('sidebar-control');
const sidebar = document.getElementById('sidebar');
const mainContent = document.getElementById('main-content');
const dropdownHomeBtn = document.getElementById('dropdown-home-btn');
const dropdownHome = document.getElementById('dropdown-home');
const dropdownHomeArrow = document.getElementById('dropdown-home-arrow');
sidebarControll.onclick = () => {
sidebar.classList.toggle('left-[-310px]');
mainContent.classList.toggle('ml-[310px]');
};
document.querySelectorAll('.dropdown-btn').forEach((button) => {
button.addEventListener('click', function (e) {
e.preventDefault();
const dropdownContent = button.nextElementSibling;
const dropdownArrow = button.querySelector('.dropdown-arrow');
// Toggle dropdown
if (dropdownContent.style.maxHeight) {
dropdownContent.style.maxHeight = null;
dropdownContent.style.opacity = 0;
} else {
dropdownContent.style.maxHeight = dropdownContent.scrollHeight + 'px';
dropdownContent.style.opacity = 1;
}
// Rotate arrow
dropdownArrow.classList.toggle('rotate-90');
});
});Code & Preview
See the Pen sidebar with dropdown menu tailwindcss by Mamun Hossain (@Mamun-Hossain-the-bold) on CodePen.
If you encounter issues while creating your project, you can download the source code files for free by clicking the Source Code button. Additionally, you can edit and view a live demo by clicking the Edit With Codepen button below.
