Simple Responsive Navigation Bar

Minimal javascript - built using nested details element.

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

Navbar

Author Sherry Lynne

Tailwind v3.4 241

Fork Fullscreen

<div class="bg-white font-sans font-light text-black w-screen">
  <div class="w-full mx-auto bg-indigo-950 text-white text-sm">
    <details id="nav1" class="group relative bg-inherit w-full max-w-7xl xl:mx-auto open:min-h-screen open:absolute open:top:100 open:left:0 xl:open:static xl:open:min-h-0">
      <summary class="flex xl:invisible xl:hidden relative">
        <span class="block px-3 py-3 flex items-center gap-2 w-full">Company Nav          
          <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 xl:max-2xl:px-9">
        <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>
  <div class="p-5">
    <h1 class="text-4xl lg:text-5xl xl:text-6xl font-light font-extralight">Simple Responsive Nav</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

Navbar with search
Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

Mamadou Diouma II Bah

3 years ago

17k
Navbar

Crimson

1 year ago

3.6k
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
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
flower
by salvator

Baraka Salvator

1 year ago

1.9k
Repsonsive Navbar
fully respondive navbar

Ganesh Salunke

7 months ago

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

zobaidul kaziex

2 years ago

4.3k
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
hero modern
hero modern

Omer fils ELENGA

9 months ago

841
material ios navbar mobile apple endroid
material ios navbar mobile apple endroid

Omer fils ELENGA

11 months ago

574
Life Tree
by salvator

Baraka Salvator

1 year ago

1.4k
Simple Responsive Navigation Bar w/Translation link
Minimal javascript - built using nested details element.

Sherry Lynne

2 months ago

137