Tailwind CSS Header Components
Define the structural identity of your pages with a semantic header component. It houses titles, logos, and introductory content, following accessibility standards to ensure your site's hierarchy is clear to users and search engine bots.
Basic Usage
html
<header class="header">
<div class="header-body">
<a class="heading-2xl flex items-center" title="frutjam">
<svg width="32" height="32" class="mr-3 h-8" viewBox="0 0 240.000000 240.000000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<desc>Frutjam logo</desc>
<rect x="34.468" y="34.397" width="171.631" height="171.064" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)"></rect>
<g transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)" fill="#1529ff" stroke="none">
<path d="M723 2319 c-225 -16 -369 -68 -471 -171 -92 -91 -136 -195 -164 -387 -18 -120 -18 -1002 0 -1122 28 -192 72 -298 163 -388 88 -88 192 -133 374 -162 105 -16 823 -24 1012 -10 305 22 448 80 557 225 108 145 136 327 136 896 0 496 -19 671 -90 816 -51 106 -118 173 -224 224 -97 47 -188 67 -373 80 -160 11 -756 11 -920 -1z m909 -433 c180 -40 266 -124 306 -300 23 -104 23 -698 0 -802 -41 -182 -133 -267 -329 -305 -87 -17 -707 -18 -806 -1 -201 34 -300 122 -340 304 -23 106 -24 700 0 804 20 92 55 161 106 207 110 99 227 118 706 112 207 -3 309 -8 357 -19z"></path>
<path d="M951 1535 c-48 -15 -85 -45 -109 -90 -14 -25 -17 -63 -17 -230 0 -110 3 -212 8 -227 13 -48 64 -96 120 -113 72 -21 422 -21 494 0 56 17 107 65 120 113 10 35 10 399 0 434 -13 48 -64 96 -120 113 -68 20 -431 20 -496 0z"></path>
</g>
</svg>
<span>Frutjam</span>
</a>
<!-- for large screen -->
<div class="hidden lg:block w-full">
<nav class="navbar navbar-x-end">
<ul class="navbar-list gap-x-6">
<li>
<a class="link link-xs link-hover">About</a>
</li>
<li>
<a class="link link-xs link-hover">Pricing</a>
</li>
<li>
<a class="link link-xs link-hover">Services</a>
</li>
</ul>
</nav>
</div>
<!-- for small screen -->
<div class="block lg:hidden">
<button type="button" class="btn-base btn-sm btn-ghost" onclick="headerToggleMenu1.show()">
<span class="sr-only">Menu</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" x2="20" y1="10" y2="10"></line>
<line x1="4" x2="20" y1="20" y2="20"></line>
</svg>
</button>
<dialog class="drawer drawer-bottom" id="headerToggleMenu1">
<div class="drawer-body">
<ul class="menu p-4">
<li><a class="menu-item">About</a></li>
<li>
<div class="accordion accordion-flush">
<details>
<summary>Resources</summary>
<div class="accordion-body">
<ul>
<li><a class="menu-item">Help center</a></li>
<li><a class="menu-item">Products</a></li>
</ul>
</div>
</details>
</div>
</li>
<li><a class="menu-item">Pricing</a></li>
</ul>
</div>
<button type="button" class="drawer-backdrop" onclick="headerToggleMenu1.close()">Close Drawer via Backdrop</button>
</dialog>
</div>
</div>
</header>Navbar Alignment
Centered Navigation
html
<header class="header">
<div class="header-body">
<a class="heading-2xl flex items-center" title="frutjam">
<svg width="32" height="32" class="mr-3 h-8" viewBox="0 0 240.000000 240.000000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<desc>Frutjam logo</desc>
<rect x="34.468" y="34.397" width="171.631" height="171.064" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)"></rect>
<g transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)" fill="#1529ff" stroke="none">
<path d="M723 2319 c-225 -16 -369 -68 -471 -171 -92 -91 -136 -195 -164 -387 -18 -120 -18 -1002 0 -1122 28 -192 72 -298 163 -388 88 -88 192 -133 374 -162 105 -16 823 -24 1012 -10 305 22 448 80 557 225 108 145 136 327 136 896 0 496 -19 671 -90 816 -51 106 -118 173 -224 224 -97 47 -188 67 -373 80 -160 11 -756 11 -920 -1z m909 -433 c180 -40 266 -124 306 -300 23 -104 23 -698 0 -802 -41 -182 -133 -267 -329 -305 -87 -17 -707 -18 -806 -1 -201 34 -300 122 -340 304 -23 106 -24 700 0 804 20 92 55 161 106 207 110 99 227 118 706 112 207 -3 309 -8 357 -19z"></path>
<path d="M951 1535 c-48 -15 -85 -45 -109 -90 -14 -25 -17 -63 -17 -230 0 -110 3 -212 8 -227 13 -48 64 -96 120 -113 72 -21 422 -21 494 0 56 17 107 65 120 113 10 35 10 399 0 434 -13 48 -64 96 -120 113 -68 20 -431 20 -496 0z"></path>
</g>
</svg>
<span>Frutjam</span>
</a>
<!-- for large screen -->
<div class="hidden lg:block w-full">
<nav class="navbar navbar-x-center">
<ul class="navbar-list gap-x-6">
<li>
<a class="link link-xs link-hover">About</a>
</li>
<li>
<a class="link link-xs link-hover">Pricing</a>
</li>
<li>
<a class="link link-xs link-hover">Services</a>
</li>
</ul>
</nav>
</div>
<!-- for small screen -->
<div class="block lg:hidden">
<button type="button" class="btn-base btn-sm btn-ghost" onclick="headerToggleMenu2.show()">
<span class="sr-only">Menu</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" x2="20" y1="10" y2="10"></line>
<line x1="4" x2="20" y1="20" y2="20"></line>
</svg>
</button>
<dialog class="drawer drawer-bottom" id="headerToggleMenu2">
<div class="drawer-body">
<ul class="menu p-4">
<li><a class="menu-item">About</a></li>
<li>
<div class="accordion accordion-flush">
<details>
<summary>Resources</summary>
<div class="accordion-body">
<ul>
<li><a class="menu-item">Help center</a></li>
<li><a class="menu-item">Products</a></li>
</ul>
</div>
</details>
</div>
</li>
<li><a class="menu-item">Pricing</a></li>
</ul>
</div>
<button type="button" class="drawer-backdrop" onclick="headerToggleMenu2.close()">Close Drawer via Backdrop</button>
</dialog>
</div>
</div>
</header>Centered with Action Button
html
<header class="header">
<div class="header-body">
<a class="heading-2xl flex items-center" title="frutjam">
<svg width="32" height="32" class="mr-3 h-8" viewBox="0 0 240.000000 240.000000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
<desc>Frutjam logo</desc>
<rect x="34.468" y="34.397" width="171.631" height="171.064" stroke="rgb(0, 0, 0)" fill="rgb(255, 255, 255)"></rect>
<g transform="translate(0.000000,240.000000) scale(0.100000,-0.100000)" fill="#1529ff" stroke="none">
<path d="M723 2319 c-225 -16 -369 -68 -471 -171 -92 -91 -136 -195 -164 -387 -18 -120 -18 -1002 0 -1122 28 -192 72 -298 163 -388 88 -88 192 -133 374 -162 105 -16 823 -24 1012 -10 305 22 448 80 557 225 108 145 136 327 136 896 0 496 -19 671 -90 816 -51 106 -118 173 -224 224 -97 47 -188 67 -373 80 -160 11 -756 11 -920 -1z m909 -433 c180 -40 266 -124 306 -300 23 -104 23 -698 0 -802 -41 -182 -133 -267 -329 -305 -87 -17 -707 -18 -806 -1 -201 34 -300 122 -340 304 -23 106 -24 700 0 804 20 92 55 161 106 207 110 99 227 118 706 112 207 -3 309 -8 357 -19z"></path>
<path d="M951 1535 c-48 -15 -85 -45 -109 -90 -14 -25 -17 -63 -17 -230 0 -110 3 -212 8 -227 13 -48 64 -96 120 -113 72 -21 422 -21 494 0 56 17 107 65 120 113 10 35 10 399 0 434 -13 48 -64 96 -120 113 -68 20 -431 20 -496 0z"></path>
</g>
</svg>
<span>Frutjam</span>
</a>
<!-- for large screen -->
<div class="hidden lg:block w-full">
<nav class="navbar navbar-x-center">
<ul class="navbar-list gap-x-6">
<li>
<a class="link link-xs link-hover">About</a>
</li>
<li>
<a class="link link-xs link-hover">Pricing</a>
</li>
<li>
<a class="link link-xs link-hover">Services</a>
</li>
</ul>
</nav>
</div>
<!-- for small screen -->
<div class="block lg:hidden">
<button type="button" class="btn-base btn-sm btn-ghost" onclick="headerToggleMenu3.show()">
<span class="sr-only">Menu</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="4" x2="20" y1="10" y2="10"></line>
<line x1="4" x2="20" y1="20" y2="20"></line>
</svg>
</button>
<dialog class="drawer drawer-bottom" id="headerToggleMenu3">
<div class="drawer-body">
<ul class="menu p-4">
<li><a class="menu-item">About</a></li>
<li>
<div class="accordion accordion-flush">
<details>
<summary>Resources</summary>
<div class="accordion-body">
<ul>
<li><a class="menu-item">Help center</a></li>
<li><a class="menu-item">Products</a></li>
</ul>
</div>
</details>
</div>
</li>
<li><a class="menu-item">Pricing</a></li>
</ul>
</div>
<button type="button" class="drawer-backdrop" onclick="headerToggleMenu3.close()">Close Drawer via Backdrop</button>
</dialog>
</div>
</div>
</header>