Skip to main content
USWDS + Tailwind

Header

Identify your site and connect visitors to its main sections with default and extended header layouts.

These examples use the following JavaScript initializers:

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Project Title
HTML
<header>
  <div class="@container">
    <div
      class="max-w-5xl flex mx-auto justify-between items-center @desktop:items-end border-b @desktop:border-b-0 border-b-gray-cool-10"
    >
      <div class="@desktop:text-2xl @desktop:mt-8 @desktop:mb-4 ml-4 @desktop:ml-0 @desktop:w-1/3 w-full">
        <em class="font-bold not-italic">
          <a
            class="text-gray-90 focus:outline-4 focus:outline-blue-40v"
            href="/"
          >Project Title</a>
        </em>
      </div>
      <div class="@desktop:hidden">
        <button
          data-scope="modal" data-part="trigger"
          data-target="mobile-menu"
          class="uppercase ml-auto leading-none text-white text-sm h-12 px-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-blue-40v"
        >Menu</button>
      </div>
      <div class="hidden @desktop:flex ml-auto">
        <nav class="flex justify-end items-center pl-2 pb-1">
          <ul class="flex">
            <li class="leading-none">
              <div data-scope="dropdown" data-part="root">
                <button
                  data-scope="dropdown" data-part="trigger"
                  class="after:bg-blue-60v after:absolute after:-bottom-1 after:inset-x-4 after:h-1 relative flex items-center gap-1 group p-4 aria-expanded:bg-blue-warm-80v aria-[expanded=true]:text-white font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:-bottom-1 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden"
                >
                  <span>Dropdown</span>
                  <div
                    aria-hidden="true"
                    class="hidden @mobile-lg:inline-flex"
                  >
                    <span
                      class="icon-[material-symbols--keyboard-arrow-down] group-aria-expanded:icon-[material-symbols--keyboard-arrow-up] align-middle size-4"
                    ></span>
                  </div>
                </button>
                <div
                  data-scope="dropdown" data-part="content"
                  class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug"
                >
                  <div data-scope="dropdown" data-part="item"><a
                    href="#"
                    class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                  >Action</a></div>
                  <div data-scope="dropdown" data-part="item"><a
                    href="#"
                    class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                  >Another action</a></div>
                </div>
              </div>
            </li>
            <li class="leading-none">
              <div data-scope="dropdown" data-part="root">
                <button
                  data-scope="dropdown" data-part="trigger"
                  class=" relative flex items-center gap-1 group p-4 aria-expanded:bg-blue-warm-80v aria-[expanded=true]:text-white font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:-bottom-1 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden"
                >
                  <span>Dropdown</span>
                  <div
                    aria-hidden="true"
                    class="hidden @mobile-lg:inline-flex"
                  >
                    <span
                      class="icon-[material-symbols--keyboard-arrow-down] group-aria-expanded:icon-[material-symbols--keyboard-arrow-up] align-middle size-4"
                    ></span>
                  </div>
                </button>
                <div
                  data-scope="dropdown" data-part="content"
                  class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug"
                >
                  <div data-scope="dropdown" data-part="item"><a
                    href="#"
                    class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                  >Action</a></div>
                  <div data-scope="dropdown" data-part="item"><a
                    href="#"
                    class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                  >Another action</a></div>
                </div>
              </div>
            </li>
            <li class="leading-none">
              <a
                href="#"
                class="p-4 flex font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v"
              >Link</a>
            </li>
          </ul>


          <section aria-label="search component">
            <form role="search">
              <label
                for="nav-search"
                class="sr-only"
              >Search</label>
              <div class="relative flex items-center">
                <input
                  id="nav-search"
                  type="search"
                  class="p-2 w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
                >
                <button
                  aria-label="search"
                  class="flex items-center rounded-r font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
                >
                  <div class="icon-[material-symbols--search] size-6"></div>
                </button>
              </div>
            </form>
          </section>


        </nav>


      </div>
    </div>
  </div>


  <div data-scope="modal" data-part="root" data-value="mobile-menu">
    <div
      data-scope="modal" data-part="positioner"
      data-value="mobile-menu"
      class="fixed z-50 inset-0 overflow-y-auto"
    >
      <nav
        data-scope="modal" data-part="content"
        class="hidden data-[state=open]:flex flex-col gap-6 pt-16 pb-4 px-4 bg-white w-60 fixed right-0 inset-y-0 overflow-auto animate-in duration-300 ease-in-out slide-in-from-right"
      >


        <header
          data-scope="modal" data-part="title"
          class="sr-only"
        >Menu</header>


        <button
          type="button"
          data-scope="modal" data-part="close-trigger"
          class="absolute top-0 right-0 size-12 flex items-center justify-center text-black bg-transparent focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
          aria-label="Close"
        >
          <div class="icon-[material-symbols--close] size-6"></div>
        </button>


        <section aria-label="search component">
          <form role="search">
            <label
              for="mobile-nav-search"
              class="sr-only"
            >Search</label>
            <div class="relative flex items-center">
              <input
                id="mobile-nav-search"
                type="search"
                class="p-2 w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
              >
              <button
                aria-label="search"
                class="flex items-center rounded-r font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
              >
                <div class="icon-[material-symbols--search] size-6"></div>
              </button>
            </div>
          </form>
        </section>


        <ul class="flex flex-col">
          <li class="border-t border-t-gray-10">
            <div data-scope="accordion" data-part="root">
              <div
                data-scope="accordion" data-part="item"
                data-value="mobile-dropdown-1"
              >
                <button
                  data-scope="accordion" data-part="item-trigger"
                  class="text-left group relative flex items-center justify-between w-full py-3 pl-4 leading-none hover:bg-gray-5 focus:z-10 focus:outline-4 focus:outline-blue-40v gap-3 data-[current]:font-bold data-[current]:after:block data-[current]:after:absolute data-[current]:after:bg-blue-60v data-[current]:after:inset-y-1 data-[current]:after:left-0 data-[current]:after:w-1 data-[current]:after:rounded-full"
                  data-current="true"
                >
                  <span
                    class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">Dropdown</span>
                  <span class="h-full flex items-center">
                    <span
                      class="size-5 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"
                    ></span>
                  </span>
                </button>
                <ul data-scope="accordion" data-part="item-content">
                  <li class="border-t border-t-gray-10">
                    <a
                      href="#"
                      class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                    >Dropdown</a>
                  </li>
                  <li class="border-t border-t-gray-10">
                    <a
                      href="#"
                      class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                    >Dropdown</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="border-t border-t-gray-10">
            <div data-scope="accordion" data-part="root">
              <div
                data-scope="accordion" data-part="item"
                data-value="mobile-dropdown-2"
              >
                <button
                  data-scope="accordion" data-part="item-trigger"
                  class="text-left group relative flex items-center justify-between w-full py-3 pl-4 leading-none hover:bg-gray-5 focus:z-10 focus:outline-4 focus:outline-blue-40v gap-3 data-[current]:font-bold data-[current]:after:block data-[current]:after:absolute data-[current]:after:bg-blue-60v data-[current]:after:inset-y-1 data-[current]:after:left-0 data-[current]:after:w-1 data-[current]:after:rounded-full"
                >
                  <span
                    class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">Dropdown</span>
                  <span class="h-full flex items-center">
                    <span
                      class="size-5 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"
                    ></span>
                  </span>
                </button>
                <ul data-scope="accordion" data-part="item-content">
                  <li class="border-t border-t-gray-10">
                    <a
                      href="#"
                      class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                    >Dropdown</a>
                  </li>
                  <li class="border-t border-t-gray-10">
                    <a
                      href="#"
                      class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                    >Dropdown</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li class="border-t border-t-gray-10">
            <a
              href="#"
              class="block py-3 px-4 leading-none text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
            >Link</a>
          </li>
        </ul>


      </nav>
    </div>


    <div
      data-scope="modal" data-part="backdrop"
      data-value="mobile-menu"
      class="hidden data-[state=open]:block fixed z-40 inset-0 bg-black/70 animate-in duration-150 ease-in-out fade-in-0"
    ></div>


  </div>
</header>

Extended

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
HTML
<header>
  <div class="@container">
    <div
      class="max-w-5xl flex justify-between items-center @desktop:px-8 mx-auto border-b @desktop:border-b-0 border-b-gray-cool-10"
    >
      <div class="@desktop:text-4xl @desktop:pt-8 @desktop:pb-6 ml-4 @desktop:ml-0 @desktop:w-1/3 w-full">
        <em class="font-bold not-italic">
          <a
            class="text-gray-90 focus:outline-4 focus:outline-blue-40v"
            href="/"
          >Project Title</a>
        </em>
      </div>
      <div class="@desktop:hidden">
        <button
          data-scope="modal" data-part="trigger"
          data-target="mobile-extended-menu"
          class="uppercase ml-auto leading-none text-white text-sm h-12 px-3 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-blue-40v"
        >Menu</button>
      </div>
    </div>
    <div class="hidden @desktop:block border-t border-t-gray-cool-10">
      <nav class="max-w-5xl px-4 mx-auto relative">
        <ul class="flex">
          <li class="leading-none">
            <div data-scope="dropdown" data-part="root">
              <button
                data-scope="dropdown" data-part="trigger"
                class="after:bg-blue-60v after:absolute after:-bottom-1 after:inset-x-4 after:h-1 relative flex items-center gap-1 group p-4 aria-expanded:bg-blue-warm-80v aria-[expanded=true]:text-white font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:-bottom-1 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden"
              >
                <span>Dropdown</span>
                <div class="hidden @mobile-lg:inline-flex">
                  <span
                    class="icon-[material-symbols--keyboard-arrow-down] group-aria-expanded:icon-[material-symbols--keyboard-arrow-up] align-middle size-4"
                  ></span>
                </div>
              </button>
              <div
                data-scope="dropdown" data-part="content"
                class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug"
              >
                <div data-scope="dropdown" data-part="item"><a
                  href="#"
                  class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                >Action</a></div>
                <div data-scope="dropdown" data-part="item"><a
                  href="#"
                  class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                >Another action</a></div>
              </div>
            </div>
          </li>
          <li class="leading-none">
            <div data-scope="dropdown" data-part="root">
              <button
                data-scope="dropdown" data-part="trigger"
                class=" relative flex items-center gap-1 group p-4 aria-expanded:bg-blue-warm-80v aria-[expanded=true]:text-white font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:-bottom-1 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden"
              >
                <span>Dropdown</span>
                <div class="hidden @mobile-lg:inline-flex">
                  <span
                    class="icon-[material-symbols--keyboard-arrow-down] group-aria-expanded:icon-[material-symbols--keyboard-arrow-up] align-middle size-4"
                  ></span>
                </div>
              </button>
              <div
                data-scope="dropdown" data-part="content"
                class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug"
              >
                <div data-scope="dropdown" data-part="item"><a
                  href="#"
                  class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                >Action</a></div>
                <div data-scope="dropdown" data-part="item"><a
                  href="#"
                  class="flex text-white py-2 px-4 hover:underline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
                >Another action</a></div>
              </div>
            </div>
          </li>
          <li class="leading-none">
            <a
              href="#"
              class="p-4 flex font-bold text-gray-cool-60 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v"
            >Link</a>
          </li>
        </ul>


        <div class="mt-2 right-8 bottom-16 absolute min-w-64 flex flex-col items-end">


          <ul class="flex gap-2 mb-1 divide-x divide-gray-cool-10 *:pr-2 *:last:pr-0">
            <li class="inline-flex">
              <a
                href="#"
                class="text-gray-50 text-sm hover:underline hover:text-blue-60v focus:outline-4 focus:outline-blue-40v"
              >Secondary Link</a>
            </li>
            <li class="inline-flex">
              <a
                href="#"
                class="text-gray-50 text-sm hover:underline hover:text-blue-60v focus:outline-4 focus:outline-blue-40v"
              >Another Secondary Link</a>
            </li>
          </ul>


          <section aria-label="search component">
            <form
              role="search"
              class="mt-1 max-w-64"
            >
              <label
                for="nav-search"
                class="sr-only"
              >Search</label>
              <div class="relative flex items-center">
                <input
                  id="nav-search"
                  type="search"
                  class="p-2 max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
                >
                <button
                  aria-label="search"
                  class="flex items-center rounded-r font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
                >
                  <div class="icon-[material-symbols--search] size-6"></div>
                </button>
              </div>
            </form>
          </section>
        </div>


      </nav>


    </div>
  </div>


  <div data-scope="modal" data-part="root" data-value="mobile-extended-menu">
  <div
    data-scope="modal" data-part="backdrop"
    data-value="mobile-extended-menu"
    class="hidden data-[state=open]:block fixed z-40 inset-0 bg-black/70 animate-in duration-150 ease-in-out fade-in-0"
  ></div>


  <div
    data-scope="modal" data-part="positioner"
    data-value="mobile-extended-menu"
    class="fixed z-50 inset-0 overflow-y-auto"
  >
    <nav
      data-scope="modal" data-part="content"
      class="hidden data-[state=open]:flex flex-col gap-6 pt-16 pb-4 px-4 bg-white w-60 fixed right-0 inset-y-0 overflow-auto animate-in duration-300 ease-in-out slide-in-from-right"
    >


      <header
        data-scope="modal" data-part="title"
        class="sr-only"
      >Menu</header>


      <button
        type="button"
        data-scope="modal" data-part="close-trigger"
        class="absolute top-0 right-0 size-12 flex items-center justify-center text-black bg-transparent focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v"
        aria-label="Close"
      >
        <div class="icon-[material-symbols--close] size-6"></div>
      </button>


      <ul class="flex flex-col">
        <li class="border-t border-t-gray-10">
          <div data-scope="accordion" data-part="root">
            <div
              data-scope="accordion" data-part="item"
              data-value="mobile-dropdown-1"
            >
              <button
                data-scope="accordion" data-part="item-trigger"
                class="text-left group relative flex items-center justify-between w-full py-3 pl-4 leading-none hover:bg-gray-5 focus:z-10 focus:outline-4 focus:outline-blue-40v gap-3 data-[current]:font-bold data-[current]:after:block data-[current]:after:absolute data-[current]:after:bg-blue-60v data-[current]:after:inset-y-1 data-[current]:after:left-0 data-[current]:after:w-1 data-[current]:after:rounded-full"
                data-current="true"
              >
                <span
                  class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">Dropdown</span>
                <span class="h-full flex items-center">
                  <span
                    class="size-5 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"
                  ></span>
                </span>
              </button>
              <ul data-scope="accordion" data-part="item-content">
                <li class="border-t border-t-gray-10">
                  <a
                    href="#"
                    class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                  >Dropdown</a>
                </li>
                <li class="border-t border-t-gray-10">
                  <a
                    href="#"
                    class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                  >Dropdown</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="border-t border-t-gray-10">
          <div data-scope="accordion" data-part="root">
            <div
              data-scope="accordion" data-part="item"
              data-value="mobile-dropdown-2"
            >
              <button
                data-scope="accordion" data-part="item-trigger"
                class="text-left group relative flex items-center justify-between w-full py-3 pl-4 leading-none hover:bg-gray-5 focus:z-10 focus:outline-4 focus:outline-blue-40v gap-3 data-[current]:font-bold data-[current]:after:block data-[current]:after:absolute data-[current]:after:bg-blue-60v data-[current]:after:inset-y-1 data-[current]:after:left-0 data-[current]:after:w-1 data-[current]:after:rounded-full"
              >
                <span
                  class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">Dropdown</span>
                <span class="h-full flex items-center">
                  <span
                    class="size-5 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"
                  ></span>
                </span>
              </button>
              <ul data-scope="accordion" data-part="item-content">
                <li class="border-t border-t-gray-10">
                  <a
                    href="#"
                    class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                  >Dropdown</a>
                </li>
                <li class="border-t border-t-gray-10">
                  <a
                    href="#"
                    class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
                  >Dropdown</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="border-t border-t-gray-10">
          <a
            href="#"
            class="block py-3 px-4 leading-none text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline-4 focus:outline-blue-40v"
          >Link</a>
        </li>
      </ul>


      <div class="flex flex-col gap-4">
        <ul>
          <li>
            <a
              href="#"
              class="text-gray-50 text-sm hover:underline hover:text-blue-60v focus:outline-4 focus:outline-blue-40v"
            >Secondary Link</a>
          </li>
          <li>
            <a
              href="#"
              class="text-gray-50 text-sm hover:underline hover:text-blue-60v focus:outline-4 focus:outline-blue-40v"
            >Another Secondary Link</a>
          </li>
        </ul>


        <section aria-label="search component">
          <form role="search">
            <label
              for="mobile-nav-search"
              class="sr-only"
            >Search</label>
            <div class="relative flex items-center">
              <input
                id="mobile-nav-search"
                type="search"
                class="p-2 bg-transparent w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
              >
              <button
                aria-label="search"
                class="flex items-center rounded-r font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v"
              >
                <div class="icon-[material-symbols--search] size-6"></div>
              </button>
            </div>
          </form>
        </section>
      </div>


    </nav>


  </div>
  </div>
</header>

Component API

Initialize the dropdowns, mobile modal, and mobile accordions after the complete markup exists:

import { accordionInit } from '@uswds-tailwind/compat/accordion'
import { dropdownInit } from '@uswds-tailwind/compat/dropdown'
import { modalInit } from '@uswds-tailwind/compat/modal'


accordionInit()
dropdownInit()
modalInit()

There is no separate Header initializer. Match each modal trigger’s data-target to its root’s data-value. Give each accordion item a unique data-value within its root.

Use the Accordion, Dropdown, and Modal APIs for configuration and cleanup. The layout uses CSS breakpoints to switch between desktop and mobile navigation.