Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Header Component

CSS-only Tailwind CSS header blocks with navbar, branding, and mobile drawer. Sticky, transparent, and responsive layout variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Mises en page d'en-tête prêtes à l'emploi créées avec le composant d'en-tête, la barre de navigation et le tiroir pour mobile.

En-tête

Frutjam logo Frutjam
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<header class="header">
  <div class="header-content">
    <div class="header-start">
      <a class="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>
    </div>
    <div class="header-center">
      <nav class="navbar hidden lg:flex">
        <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>
          <li><a class="link link-xs link-hover">Blog</a></li>
        </ul>
      </nav>
    </div>
    <div class="header-end">
      <div class="hidden lg:flex gap-x-2">
        <a class="btn btn-outline btn-sm">Login</a>
        <a class="btn btn-neutral btn-sm">Sign up</a>
      </div>
      <div class="lg:hidden">
        <button type="button" class="btn 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-content">
            <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-content">
                      <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>
  </div>
</header>