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 v3.4. It is responsive.

Navbar

Author Anonymous

Tailwind v3.4 4k 3

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

sidebar responsive
responsive sidebar with working links

Ganesh Salunke

9 months ago

1.3k
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

4 months ago

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

TailwindFlex

4 years ago

20.6k
Responsive Gradient Navbar

JUGENDRA GANGWAR

1 week ago

28
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Rajesh Pandey

1 year ago

1.6k
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.

irahoza daniel

1 year ago

1.4k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

1k
navigation
tailwind navigation pills

Anonymous

2 years ago

9.6k
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.

nejaa badr

2 years ago

5.3k
Life Tree
by salvator

Baraka Salvator

1 year ago

1.4k
Ecommerce Navbar with products, Expanding Search & Mobile sidebar filter
luxury ecommerce navigation bar crafted with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

4 months ago

241
navbar moderne et epure
navbar moderne et epure

Omer fils ELENGA

7 months ago

858