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

3.1k

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

Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Author:
Shivam Vishwakarma

2 months ago

191
Fixed navbar

Author:
Oliver Hansen

2 years ago

25.8k
Best Responsive Navbar Design | Easy & Modern Navigation
Learn how to create a fully responsive navbar using HTML, CSS, and JavaScript. Perfect for beginners and developers looking for a modern, mobile-friendly navigation bar.

Author:
Vishvajeet

7 months ago

3.2k
tradition music
by salvator

Author:
Baraka Salvator

3 months ago

538
Animated underline hover navbar
Simple animated underline hover effect navbar.

Author:
inbarajan P

1 year ago

2.3k
less is more
less is more by salvator

Author:
Baraka Salvator

2 months ago

562
Brand Navbar
Menu side bar navigation bar

Author:
ORGIN_DREAMS

3 months ago

389
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

4 months ago

863
Tailwind Sidebar Layout

Author:
Junior Gauze

10 months ago

1.5k
htmlcolours

Author:
Anonymous

2 months ago

182
Navigation bar
Navbar

Author:
Aman kumar

1 year ago

3.8k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

10 months ago

2.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components