Skip to main content
Logo USWDS + Tailwind

Header

A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.

This component requires the following JavaScript plugins:

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Twig
{% macro desktop(navigation) %}
<nav class="flex justify-end items-center pl-2 pb-1">
<ul class="flex">
{% for primary_item in navigation.primary %}
<li class="leading-none">
{% if primary_item.children %}
<div x-dropdown>
<button x-dropdown:trigger class="{{ primary_item.is_active ? '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 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>{{- primary_item.label -}}</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 x-dropdown:content class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug">
{% for child in primary_item.children %}
<a x-dropdown:item href="{{- child.href -}}" class="flex text-white py-2 px-4 hover:underline focus:outline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v">{{- child.label -}}</a>
{% endfor %}
</div>
</div>
{% else %}
<a href="{{- primary_item.href -}}" class="p-4 flex font-bold text-gray-cool-60 focus:outline focus:outline-4 focus:outline-blue-40v hover:text-blue-60v">{{- primary_item.label -}}</a>
{% endif %}
</li>
{% endfor %}
</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 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 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>
{% endmacro %}
{% import _self as self %}
<header x-modal>
<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 focus:outline-4 focus:outline-blue-40v" href="/">Project Title</a>
</em>
</div>
<div class="@desktop:hidden">
<button x-modal:trigger 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 focus:outline-4 focus:outline-blue-40v">Menu</button>
</div>
<div class="hidden @desktop:flex ml-auto">
{{ self.desktop(navigation) }}
</div>
</div>
</div>
<div>
<div x-modal:dialog class="fixed z-50 inset-0 overflow-y-auto flex items-center justify-center p-4 animate-in duration-300 ease-in-out slide-in-from-right">
<nav x-modal:content class="flex flex-col gap-6 pt-16 pb-4 px-4 bg-white w-60 fixed right-0 inset-y-0 overflow-auto">
<header x-modal:title class="sr-only">Menu</header>
<button type="button" x-modal:close-button class="absolute top-0 right-0 size-12 flex items-center justify-center text-black bg-transparent focus:outline 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 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 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">
{% for primary_item in navigation.primary %}
<li class="border-t border-t-gray-10">
{% if primary_item.children %}
<div x-accordion>
<div x-accordion:item>
<button x-accordion: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 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" {{ primary_item.is_active ? "data-current='true'" }}>
<span class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">{{- primary_item.label -}}</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 x-accordion:content>
{% for child in primary_item.children %}
<li class="border-t border-t-gray-10">
<a href="{{ primary_item.href }}" class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline focus:outline-4 focus:outline-blue-40v">
{{- primary_item.label -}}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% else %}
<a href="{{- primary_item.href -}}" class="block py-3 px-4 leading-none text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline focus:outline-4 focus:outline-blue-40v">{{- primary_item.label -}}</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
<template x-teleport="body">
<div x-modal:backdrop class="fixed z-40 inset-0 bg-black/70 animate-in duration-150 ease-in-out fade-in-0"></div>
</template>
</div>
</header>

Extended

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Twig
{% macro desktop(navigation) %}
<nav class="max-w-5xl px-4 mx-auto relative">
<ul class="flex">
{% for primary_item in navigation.primary %}
<li class="leading-none">
{% if primary_item.children %}
<div x-dropdown>
<button x-dropdown:trigger class="{{ primary_item.is_active ? 'after:bg-blue-60v after:absolute after:bottom-0 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 focus:outline-4 focus:outline-blue-40v hover:text-blue-60v hover:after:bg-blue-60v hover:after:absolute hover:after:bottom-0 hover:after:inset-x-4 hover:after:h-1 aria-expanded:after:hidden">
<span>{{- primary_item.label -}}</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 x-dropdown:content class="outline-none z-10 bg-blue-warm-80v py-2 w-60 leading-snug">
{% for child in primary_item.children %}
<a x-dropdown:item href="{{- child.href -}}" class="flex text-white py-2 px-4 hover:underline focus:outline focus:outline-4 focus:-outline-offset-4 focus:outline-blue-40v">{{- child.label -}}</a>
{% endfor %}
</div>
</div>
{% else %}
<a href="{{- primary_item.href -}}" class="p-4 flex font-bold text-gray-cool-60 focus:outline focus:outline-4 focus:outline-blue-40v hover:text-blue-60v">{{- primary_item.label -}}</a>
{% endif %}
</li>
{% endfor %}
</ul>
<div class="mt-2 right-8 bottom-16 absolute min-w-64 flex flex-col items-end">
{% if navigation.secondary and navigation.secondary | length > 0 %}
<ul class="flex gap-2 mb-1 divide-x divide-gray-cool-10 *:pl-2 first:*:pl-0">
{% for secondary_item in navigation.secondary %}
<li class="inline-flex">
<a href="{{- secondary_item.href -}}" class="text-gray-50 text-sm leading-1 hover:underline hover:text-blue-60v focus:outline focus:outline-4 focus:outline-blue-40v">{{- secondary_item.label -}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
<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 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 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>
{% endmacro %}
{% import _self as self %}
<header x-modal>
<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 focus:outline-4 focus:outline-blue-40v" href="/">Project Title</a>
</em>
</div>
<div class="@desktop:hidden">
<button x-modal:trigger 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 focus:outline-4 focus:outline-blue-40v">Menu</button>
</div>
</div>
<div class="hidden @desktop:block border-t border-t-gray-cool-10">
{{ self.desktop(navigation) }}
</div>
</div>
<div>
<div x-modal:dialog class="fixed inset-0 overflow-y-auto flex items-center justify-center p-4 z-50 animate-in duration-300 ease-in-out slide-in-from-right">
<nav x-modal:content class="flex flex-col gap-6 pt-16 pb-4 px-4 bg-white w-60 fixed right-0 inset-y-0 overflow-auto">
<header x-modal:title class="sr-only">Menu</header>
<button type="button" x-modal:close-button class="absolute top-0 right-0 size-12 flex items-center justify-center text-black bg-transparent focus:outline 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">
{% for primary_item in navigation.primary %}
<li class="border-t border-t-gray-10">
{% if primary_item.children %}
<div x-accordion>
<div x-accordion:item>
<button x-accordion: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 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" {{ primary_item.is_active ? "data-current='true'" }}>
<span class="text-gray-60 group-hover:text-blue-60v group-[[data-current]]:text-blue-60v">{{- primary_item.label -}}</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 x-accordion:content>
{% for child in primary_item.children %}
<li class="border-t border-t-gray-10">
<a href="{{ primary_item.href }}" class="block py-2 pl-8 pr-4 text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline focus:outline-4 focus:outline-blue-40v">
{{- primary_item.label -}}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% else %}
<a href="{{- primary_item.href -}}" class="block py-3 px-4 leading-none text-gray-60 hover:text-blue-60v hover:bg-gray-5 focus:outline focus:outline-4 focus:outline-blue-40v">{{- primary_item.label -}}</a>
{% endif %}
</li>
{% endfor %}
</ul>
<div class="flex flex-col gap-4">
{% if navigation.secondary and navigation.secondary | length > 0 %}
<ul>
{% for secondary_item in navigation.secondary %}
<li>
<a href="{{- secondary_item.href -}}" class="text-gray-50 text-sm leading-1 hover:underline hover:text-blue-60v focus:outline focus:outline-4 focus:outline-blue-40v">{{- secondary_item.label -}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
<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 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 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 x-modal:backdrop class="fixed inset-0 bg-black/70 z-40 animate-in duration-150 ease-in-out fade-in-0"></div>
</div>
</header>