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
Project Title
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>