Home
Sherry Lynne
Simple Responsive Navigation Bar

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

Navbar

Author Sherry Lynne

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