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

1.7k

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

Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

6 months ago

1.7k
Tailwind Sidebar Layout
Place edited for the search button

Author:
Nur Pratap Karki

6 months ago

2.6k
Tailwind Sidebar Layout

Author:
Oliver Hansen

1 year ago

53.4k
Navbar
This navbar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background and accents 3. Dark mode support with a toggle button 4. Beautiful animations and effects: 1. Fade-in animation for menu items with staggered delays 2. Hover effects on menu items with underline animation 3. Smooth color transitions 4. Mobile menu slide-down animation 5. SVG icons for the dark mode toggle and mobile menu button 6. "Sign Up" call-to-action button 7. Mobile-friendly dropdown menu 8. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The navbar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with color changes and underline animations - The dark mode toggle changes its icon based on the current mode - The mobile menu slides down with a smooth animation when toggled - Desktop menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional navbar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

2 months ago

1.3k
New Nav Component
A new navigation component

Author:
Amit PR

8 months ago

2.3k
Minimalistic navbar
Responsive navbar

Author:
Sophia Baker

2 years ago

17.8k
Daystar Day care Dashboard
Daystar Day care Dashboard

Author:
Paul Livingstone Ssenoga

8 months ago

6.2k
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

1 month ago

743
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

15.6k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

1 year ago

21.8k
Responsive Bottom Nav
Fully Responsive bottom navigation bar with both light and dark modes

Author:
AKASH GANDHAR

6 months ago

1.6k
Simple navbar
semi transparent

Author:
Laurits

2 years ago

12.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components