Web Components Library

Main Navigation

  • this horizontal navigation goes across the full width of the page
  • visible on screens medium (md) and up
  • Handle: @main-navigation-full
  • Preview:
  • Filesystem Path: components/02-components/navigation/main-navigation-full/main-navigation-full.hbs
  • Referenced by (1): @base-layout 
<div class="hidden bg-gray-700 md:block">

    <nav class="max-w-5xl mx-auto" role="navigation" aria-label="Main">

        <ul class="flex items-center justify-between text-base text-white uppercase nav lg:text-lg">

            <li class="flex flex-auto">
                <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
                    Tour
                </a>
            </li>
            <li class="flex flex-auto">
                <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
                    Product
                </a>
            </li>
            <li class="flex flex-auto">
                <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
                    Features
                </a>
            </li>
            <li class="flex flex-auto">
                <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
                    Support
                </a>
            </li>

            <li class="relative flex-auto dropdown">

                <a class="inline-flex items-center justify-center min-w-full px-3 py-3 cursor-pointer hover:bg-gray-800 focus:bg-gray-800" href="#">
                    <span class="mr-1 uppercase">More</span>
                    <svg class="w-4 h-4 opacity-75 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                    </svg>
                </a>

                <ul class="absolute right-0 hidden w-full text-sm text-white bg-gray-700 border-t border-gray-600 shadow-md dropdown-menu lg:text-base">

                    <li>
                        <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800" href="#">Resource</a>
                    </li>
                    <li>
                        <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800" href="#">Another Resource</a>
                    </li>
                    <li>
                        <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800" href="#">About Us</a>
                    </li>
                </ul>

            </li>

        </ul>

    </nav>

</div>
  • Content: 
    .dropdown-menu {
    z-index: 200;
}

.dropdown .dropdown-menu {
    display: none;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
  • URL: /components/raw/main-navigation-full/main-navigation-full.css
  • Filesystem Path: components/02-components/navigation/main-navigation-full/main-navigation-full.css
  • Size: 140 Bytes 
<div class="hidden bg-gray-700 md:block">

  <nav class="max-w-5xl mx-auto" role="navigation" aria-label="Main">

    <ul class="flex items-center justify-between text-base text-white uppercase nav lg:text-lg">

      <li class="flex flex-auto">
        <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
          Tour
        </a>
      </li>
      <li class="flex flex-auto">
        <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
          Product
        </a>
      </li>
      <li class="flex flex-auto">
        <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
          Features
        </a>
      </li>
      <li class="flex flex-auto">
        <a class="w-full px-3 py-3 text-center transition duration-200 hover:bg-gray-800 focus:bg-gray-800" href="#">
          Support
        </a>
      </li>

      <li class="relative flex-auto dropdown">

        <a class="inline-flex items-center justify-center min-w-full px-3 py-3 cursor-pointer hover:bg-gray-800 focus:bg-gray-800" href="#">
          <span class="mr-1 uppercase">More</span>
          <svg class="w-4 h-4 opacity-75 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
          </svg>
        </a>

        {{!-- Dropdown not working due to element changes --}}

        <ul
          class="absolute right-0 hidden w-full text-sm text-white bg-gray-700 border-t border-gray-600 shadow-md dropdown-menu lg:text-base">

          <li>
            <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800"
              href="#">Resource</a>
          </li>
          <li>
            <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800"
              href="#">Another Resource</a>
          </li>
          <li>
            <a class="block px-3 py-3 transition duration-100 border-b border-gray-600 opacity-75 hover:opacity-100 hover:bg-gray-800"
              href="#">About Us</a>
          </li>
        </ul>

      </li>

    </ul>

  </nav>

</div>
 
/* No context defined. */