Home
ORGIN_DREAMS
Brand Navbar

Brand Navbar

Menu side bar navigation bar

This tailwind example is contributed by ORGIN_DREAMS, on 23-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Navigations Navbar

Author ORGIN_DREAMS

170

Fork Fullscreen

<nav class="bg-white shadow fixed top-0 w-full z-50">
  <div class="max-w-7xl mx-auto px-6">
    <div class="flex justify-between items-center h-16">
      <div class="text-2xl font-bold text-blue-600">Brand</div>
      <div class="hidden md:flex space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600">Home</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Features</a>
        <a href="#" class="text-gray-700 hover:text-blue-600">Pricing</a>
        <div class="relative group">
          <button class="inline-flex items-center text-gray-700 hover:text-blue-600 focus:outline-none">
            More
            <svg class="ml-1 h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
          </button>
          <div class="absolute hidden group-hover:block bg-white shadow-md rounded mt-2 py-2 w-40">
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">About</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">Contact</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-100">Help</a>
          </div>
        </div>
      </div>
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-700 focus:outline-none">
          <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
      </div>
    </div>
  </div>
  <div id="mobile-menu" class="hidden md:hidden bg-white shadow-md">
    <a href="#" class="block px-6 py-3 border-b border-gray-200 hover:bg-gray-100">Home</a>
    <a href="#" class="block px-6 py-3 border-b border-gray-200 hover:bg-gray-100">Features</a>
    <a href="#" class="block px-6 py-3 border-b border-gray-200 hover:bg-gray-100">Pricing</a>
    <a href="#" class="block px-6 py-3 border-b border-gray-200 hover:bg-gray-100">About</a>
    <a href="#" class="block px-6 py-3 hover:bg-gray-100">Contact</a>
  </div>

btn.addEventListener('click', () => {
      menu.classList.toggle('hidden');
    });
  </script>
</nav>

Related Examples

navbar
I'll enhance this professional navbar to make it even better. Here's an improved version with additional features and refinements: html

Author:
ishimwe prince

1 month ago

272
Tab navigation with alpine JS

Author:
Mr Robot

2 years ago

16.4k
Dark mode sidenav with collapsible menu

Author:
Rajesh Maheshwari

3 months ago

454
Material 3 NavBar [Light]
A navbar/dock that conforms to Google's Material 3 design guidelines

Author:
Nick Girga

1 month ago

289
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

7 months ago

3.4k
Tailwind Sidebar Layout (improved)
Improved Tailwind Sidebar Layout. - Responsive sidebar working - Close responsive sidebar working - Positioning menu-toggle correctly - Added some fresh icons - Added sub-items - showing on click - Added animation and swap on icons using 'peer'

Author:
Hielke Brandsma

7 months ago

2.5k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

1 week ago

129
portifolio
skills

Author:
ishimwe prince

1 month ago

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

Author:
Pardha Saradhy Madabhushi

11 months ago

1.9k
chair
by salvator

Author:
Baraka Salvator

1 month ago

187
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

3 months ago

2.5k
Navbar with sub menus

Author:
Rajesh Maheshwari

3 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components