Home
Anonymous
Navbar with Icon on the left, links and call to actions on the right

Navbar with Icon on the left, links and call to actions on the right

This tailwind example is contributed by Anonymous, on 09-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Navbar

Author Anonymous

2.6k

Fork Fullscreen

<div class="md:flex md:items-center md:gap-12">
        <nav aria-label="Global" class="hidden md:block">
          <ul class="flex items-center gap-6 text-sm">
            <li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> About </a>
            </li>

<li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> Careers </a>
            </li>

<li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> History </a>
            </li>

<li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> Services </a>
            </li>

<li>
              <a class="text-gray-500 transition hover:text-gray-500/75" href="#"> Projects </a>
            </li>

<div class="flex items-center gap-4">
          <div class="sm:flex sm:gap-4">
            <a
              class="rounded-md bg-teal-600 px-5 py-2.5 text-sm font-medium text-white shadow"
              href="#"
            >
              Login
            </a>

<div class="hidden sm:flex">
              <a
                class="rounded-md bg-gray-100 px-5 py-2.5 text-sm font-medium text-teal-600"
                href="#"
              >
                Register
              </a>
            </div>
          </div>

Related Examples

Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Author:
Coastal UI

5 months ago

1.8k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

10 months ago

3.8k
Tailwind Sidebar Layout

Author:
Junior Gauze

6 months ago

1.3k
Responsive Navbar with search profile options

Author:
Rajesh Maheshwari

2 months ago

773
Responsive navbar
navbar with the dropdown on mobile devices

Author:
Piet Vriend

2 years ago

33.8k
NavBar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

4 months ago

1.5k
Responsive Tailwind CSS Navbar
A clean and professional navigation bar built with Tailwind CSS. This component includes a logo, navigation links, and a mobile menu with a toggle button for smaller screens. Fully responsive and easy to integrate into any project. Ideal for portfolios, business websites, or modern web apps.

Author:
irahoza daniel

16 hours ago

8
Tesla Navbar
a tesla navbar

Author:
Cristian

6 months ago

1.4k
Navigation bar
Navbar

Author:
Aman kumar

11 months ago

3.2k
Transparent Navbar

Author:
Rajesh Maheshwari

2 months ago

977
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

6k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

6.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components