looking website and the elements. What's really cool is how you can implement the hover and click css styles
within the class.
Basically, its a utility first CSS framework. Now you might ask, how it is different from Bootstrap
Tailwind and Bootstrap are both popular front-end development frameworks that provide pre-designed UI components
and a set of utilities to help developers build responsive, modern websites quickly. While they share some
similarities, there are some key differences between the two frameworks that make them better suited for
different types of projects.
That being said, Bootstrap is still a great choice for many projects, especially if you want to quickly build a
website with a consistent look and feel using pre-designed components. Ultimately, the choice between Tailwind
and Bootstrap will depend on your specific project requirements and personal preferences.
Navbar Examples Designed with Tailwind CSS
All these template has a common css
output.css and the navbar toggle is achieved
- Simple Navbar
- Navbar Centered Logo
- Navbar with Social Media
- Multi Nav with Skewed Ends
- Custom Vertical Navbar
- Multi Nav with Search Bar
- Split Navbar
- Navbar Bottom
- Skewed Navbar
- Scrolling New Navbar
- Pinterest Style Navbar
- Very Simple Navbar
- Fancy Nav Links
- Static Social
- Searchbar Navbar
1. Simple Navbar
A simple navbar with
.bg-slate-800 background. The navbar collapses at
breakpoint. See how the div element with id
#menu is given a hidden at md breakpoint. The menu button is given a opacity of 0.5 on hover.
2. Navbar Centered (Inline logo)
See how the nav element has a custom css color (hexcode) thats embedded as a class
.bg-[#DB3748]. We utilized the flex classes heavily to get the inline logo and a centered navbar. This navbar has a link with sub menu as a dropdown and the caret svg. the dropdown links have red background effect on hover which is achieved by
.hover:bg-red-200. Similar to the first example, the nabvar collapses at md breakpoint with toggle enabled hamburger icon button.
3. Navbar with Social Media
This navbar has three section. Logo is left aligned with page links in the middle and social icons (links) at the right. The social links are visually hidden at smaller breakpoints. The navbar background color is also a custom color applied as a class.
4. Multiple Navbars
This is a different kind of navbar which throws some light on how to add the width as percentage in classes directly. The navbar has three section. Brand name at left and two navbars in the middle and the phone number at the end. At medium breakpoint, the middle navbar breaks into its own section which is placed below the navbar section.
5. Custom Vertical Navbar
A beautiful looking navbar with brand name in the middle and a topbar for website notifications. The main nav is vertical and always collapsed with a toggle button. At smaller breakpoints, the navbar looks similar but with initials for the brand name and a search icon enabled.
Yet again ,a simple navbar with navlinks at right and the navbar brand at the left. As usual, the navbar collapses with the hamburger icon to toggle links.
7. Multi Nav With Search bar
Perfect for an e-commerce website, this navbar features three navbars. The topbar is for compancy contact info and policy info. Middle navbar has left aligned brand logo and a right aligned search bar. The bottom bar is for categories of products.
8. Split Navbar
A simple navbar which is split into two. The navbar has the brand at the center and a collapsible navbar is at below of that. A small logo / icon can be placed between the splitted navbar. See the image below to see how the navbar is responsive at large and smaller displays.
9. Navbar Bottom
Two section navbar. Perfect for a website with quite a few links to showcase. The navbar features logo, phone number and an estimate link thats highlighted for more RIO. The bottom bar collpases to a menu button at small screens
10. Navbar Bottom
This navbar is suitable for a gaming / sports related website. The nav elements are skewed to right and the navbr collapses at smaller sections. Click on the "Squad" link to open the submenu.
12. Pinterest Style Navbar
Inspired from pinterest, I've designed this navbar to look just like pinterest navbar (at least at the time of writing this article). Features a large search bar in the middle since the website is majorly search type.
13. Very Simple Navbar
A very simple navbar where the nav links are spread across the viewport width. At small screens, the brand appears and a hamburger icon for toggling the nav links. See the image below.
14. Fancy Nav Links
A very fancy looking navbar with icons for links which translate to solid svgs when hovered over. This navbar portrays a very rich look for the website. The navbar collapses and the navlinks appear at the bottom of the page just like a mobile app.
15. Static Social
Simple navbar uptop and a static social media links on the left. The navbar collapses as normal but the logo appears with a hamburger icon to toggle nav links.
16. Searchbar Navbar
Another simple navbar with left aligned brand image and right aligned nav links. Features a search bar in the navbar.