Simple Responsive Navigation Bar w/Translation link

Forked from @slycreations/simple-responsive-navigation-bar

Minimal javascript - built using nested details element.

This tailwind example is contributed by Sherry Lynne, on 05-Aug-2026. Component is made with Tailwind v3.4. It is responsive.

Navbar

Author Sherry Lynne

Tailwind v3.4 137

Fork Fullscreen

<div class="bg-white font-sans font-light text-black w-screen">
  <div class="bg-indigo-950 text-white text-sm">
    <div class="w-full mx-auto xl:mx-auto max-w-7xl flex xl:gap-4 justify-between relative [&:has(>details[open])]:min-h-screen xl:[&:has(>details[open])]:min-h-px">
      <details open aria-expanded="true" id="nav1" class="group peer relative bg-inherit open:min-h-screen inline-block open:w-full open:absolute open:top:100 open:left:0 xl:open:static xl:open:min-h-px">
        <summary class="flex xl:inline xl:hidden relative group-open:bg-indigo-950">
          <span class="block px-3 py-3 flex items-center gap-2 w-full  xl:hidden">Company Navigation          
            <span class="xl:hidden transition-transform duration-200 group-open:rotate-[-180deg] top-50 w-0 h-0 border-solid border-b-0 border-x-[5px] border-t-[6px] border-l-transparent border-r-transparent border-b-transparent border-t-sky-400">
            </span>
          </span>
        </summary>
        <div class="w-full bg-indigo-950">
          <ul class="bg-inherit divide-y divide-white/50 divide-solid xl:divide-none xl:flex xl-space-x-4 w-full xl:justify-end xl:mx-4">
            <li class="">
              <a href="#"  class="block px-5 py-3">
                First Link
              </a>
            </li>
            <li class="relative">
              <details class="group/subnav">
                <summary class="flex px-5 py-3 flex items-center flex place-content-between w-full gap-2 relative">
                  Second Link              
                    <span class="xl-hidden transition-transform duration-200 group-open/subnav:rotate-[-180deg] top-50 w-0 h-0 border-solid border-b-0 border-x-[5px] border-t-[6px] border-l-transparent border-r-transparent border-b-transparent border-t-sky-400">
                    </span>
                </summary>
                <div class="xl:absolute xl:top-100 xl:-left-[1rem] xl:min-w-[18rem]">
                  <ul class=" pl-1 divide-y divide-white/50 divide-solid bg-black/20 xl:bg-indigo-950 xl:w-sm">
                    <li class="px-3">
                      <a href="#" class="block px-5 py-3">Sublink 1</a>
                    </li>
                    <li class="px-3">
                      <a href="#" class="block px-5 py-3">Sublink 2</a>
                    </li>
                    <li class="px-3">
                      <a href="#" class="block px-5 py-3">Sublink 3</a>
                    </li>
                  </ul>
                </div>
              </details>
            </li>
            <li>
              <a href="#"  class="block px-5 py-3">
                Third Link
              </a>
            </li>
            <li class="relative">
              <details class="group/subnav">
                <summary class=" flex px-5 py-3 flex items-center flex place-content-between w-full gap-2 relative">
                  Fourth link              
                  <span class="xl-hidden transition-transform duration-200 group-open/subnav:rotate-[-180deg] top-50 w-0 h-0 border-solid border-b-0 border-x-[5px] border-t-[6px] border-l-transparent border-r-transparent border-b-transparent border-t-sky-400">
                  </span>
                </summary>
                <div class="xl:absolute xl:top-100 xl:-right-[1rem] xl:min-w-[18rem]">
                  <ul class=" pl-1 divide-y divide-white/50 divide-solid bg-black/20 xl:bg-indigo-950 xl:w-sm">
                    <li class="px-3">
                      <a href="#" class="block px-5 py-3">Sublink 1</a>
                    </li>
                    <li class="px-3">
                      <a href="#" class="block px-5 py-3">Sublink 2</a>
                    </li>
                    <li class="px-3">
                      <a href="#" class="block px-5 py-3">Sublink 3</a>
                    </li>
                  </ul>
                </div>
              </details>
            </li>
          </ul>
        </div>
      </details>
      <div class="translation-wrapper inline-block peer-open:hidden xl:peer-open:inline-block pl-4">
        <a href="#" class="relative google-translator-switch notranslate py-3 pr-3 pl-4 block before:content-['']
          before:w-4 before:h-4 before:block before:absolute before:-left-2 before:top-3" 
          data-once="google-translate-disclaimer-init">Translate</a>
      </div>
    </div>
  </div>
  <div class="p-5">
    <h1 class="text-4xl lg:text-5xl xl:text-6xl font-light font-extralight">Simple Responsive Nav w/Translate link</h1>
    <p>Minimal javascript used, mainly to toggle between desktop and mobile views on resize.</p>
  </div>
</div>
<script>
function checkNav() {
  const detailsEl = document.getElementById('nav1');
  const expanded = detailsEl.getAttribute('aria-expanded');  
  const width = window.innerWidth;
  if (detailsEl.open && width < 1280) {
    detailsEl.open = !detailsEl.open;
    detailsEl.setAttribute('aria-expanded', 'false');
  }
  else if (!detailsEl.open && width >= 1280) {
    detailsEl.open = !detailsEl.open;
    detailsEl.setAttribute('aria-expanded', 'true');
  } 
}

// Listen for resize event (handles both desktop resizing and mobile orientation change)
window.addEventListener('resize', checkNav);
// Run once initially to check the width on page load.
checkNav();
// Could add additional javascript to close open subnavs when a new one is opened.
</script>

Related Examples

FinTech Banking Navbar with Trust Bar & Mobile Sidebar
A clean, enterprise-grade banking navigation bar built with pure HTML and Tailwind CSS. It features a trust announcement bar, responsive navigation, loan dropdown, secure call-to-action buttons, and a mobile sidebar. Perfect for fintech platforms, digital banks, insurance providers, investment firms, lending platforms, and financial service websites.

JUGENDRA GANGWAR

3 months ago

373
Dark mode sidenav with collapsible menu

Rajesh Maheshwari

1 year ago

2k
strawbery
by salvator

Baraka Salvator

1 year ago

1.9k
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

KULDEEP

1 year ago

2k
Nav Bar
Animated Mobile Dropdown menu

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

3.1k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

3 months ago

410
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
Tailwind Sidebar Layout
Place edited for the search button

Nur Pratap Karki

2 years ago

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

1 year ago

5.3k
Responsive Navbar with search profile options

Rajesh Maheshwari

1 year ago

2.7k
Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

3 months ago

326
Fixed navbar

Oliver Hansen

3 years ago

28.7k