Tailwind CSS Navbar
Use our responsive Tailwind CSS navbar for your website. It is a navigation tool, that helps users to easily access different sections or pages of a website or application.
The navbar is usually located at the top of a webpage or along the side and it can be static (remains in the same position regardless of page scrolling), or dynamic (changes in response to user interactions). You can add links, icons, links with icons, search bars, and brand text.
See below our simple navbar example that you can use in your Tailwind CSS project.
Navbar Examples:
Simple Navbar with Icons
Use this simple navbar example with navigational links and buttons that get the user's attention to perform specific actions, like "Log in".
Sticky Navbar
This component example presents a cleaner design navbar styled with sticky top-0, making it stick to the top of the viewport as the page scrolls down. Users can easily navigate through the website while engaging with the content, and the sticky navbar makes sure that navigation options are always within reach.
What is Material Tailwind
Can you help me out? you will get a lot of free exposure doing this can my website be in english?. There is too much white space do less with more, so that will be a conversation piece can you rework to make the pizza look more delicious other agencies charge much lesser can you make the blue bluer?. I think we need to start from scratch can my website be in english?, yet make it sexy i'll pay you in a week we don't need to pay upfront i hope you understand can you make it stand out more?. Make the font bigger can you help me out? you will get a lot of free exposure doing this that's going to be a chunk of change other agencies charge much lesser. Are you busy this weekend? I have a new project with a tight deadline that's going to be a chunk of change. There are more projects lined up charge extra the next time.
<nav class="block w-full max-w-screen-lg px-4 py-2 mx-auto bg-white bg-opacity-90 sticky top-3 shadow lg:px-8 lg:py-3 backdrop-blur-lg backdrop-saturate-150 z-[9999]">
<div class="container flex flex-wrap items-center justify-between mx-auto text-slate-800">
<a href="#"
class="mr-4 block cursor-pointer py-1.5 text-base text-slate-800 font-semibold">
Material Tailwind
</a>
<div class="hidden lg:block">
<ul class="flex flex-col gap-2 mt-2 mb-4 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
<li class="flex items-center p-1 text-sm gap-x-2 text-slate-600">
<a href="#" class="flex items-center">Pages</a>
</li>
<li class="flex items-center p-1 text-sm gap-x-2 text-slate-600">
<a href="#" class="flex items-center">Account</a>
</li>
<li class="flex items-center p-1 text-sm gap-x-2 text-slate-600">
<a href="#" class="flex items-center">Blocks</a>
</li>
<li class="flex items-center p-1 text-sm gap-x-2 text-slate-600">
<a href="#" class="flex items-center">Docs</a>
</li>
</ul>
</div>
<button
class="relative ml-auto h-6 max-h-[40px] w-6 max-w-[40px] select-none rounded-lg text-center align-middle text-xs font-medium uppercase text-inherit transition-all hover:bg-transparent focus:bg-transparent active:bg-transparent disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none lg:hidden"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</span>
</button>
</div>
</nav>Navbar With Search
This navbar component example includes an interactive search input field and a corresponding search button, alowing users to search content directly from the navbar. This feature helps users to quickly access information without navigating away from the current view.
The search input is styled with Tailwind CSS classes that focus on transitions, borders, placeholders, and responsiveness. A unique aspect is the use of a custom label and SVG icon to visually indicate the search area, along with transition effects for focus states that change border and text color to guide user interaction.
Dark Navbar
In this example, the navbar uses a gradient background styled with Tailwind CSS (bg-slate-900), creating a dark mode design.
The navbar incorporates a search input field with a unique label animation. The label ("Type here...") is styled to appear within the search field when it's not focused and moves above the search field when it is focused, providing a clear, interactive cue for users.
Simple Navbar
Use this minimalist navbar that can be used across a wide range of websites and web applications where navigation clarity is important.
Required Scripts
The navbar component needs a required script file to work, you just need to add the below script file to the bottom of your html file.
<!-- from node_modules -->
<script src="node_modules/@material-tailwind/html/scripts/collapse.js"></script>
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/html@latest/scripts/collapse.js"></script>Explore More Tailwind CSS Examples
Check out more navigation bar examples from Material Tailwind Blocks:
Navbar Best Practices for Developers
• Avoid cluttering it with too many links and use clear, descriptive labels for navigation links.
• Maintain consistency in the navbar's design across different pages of the website.
• Use size, color, and placement to establish a visual hierarchy in your navbar.
• Consider using a sticky or fixed navbar that remains visible as the user scrolls down the page.
• For websites with extensive content or products, include a search bar within the navbar.