Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Header Component

CSS-only Tailwind CSS page header — top bar layout with brand, navigation, and action slots. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponenty nagłówka tworzą spójne górne obszary nawigacyjne i brandingowe dla Twojej witryny lub aplikacji. Zbudowany z semantycznych elementów nagłówka HTML, system nagłówków Frutjam łączy logo, łącza nawigacyjne i działania użytkownika w spójny, responsywny pasek. Obsługuje wiele układów, opcji wyrównania i płynnie integruje się z listami rozwijanymi i funkcjami wyszukiwania.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
headerOpieraćGórny kontener paska nawigacyjnego
header-contentModyfikatorUkład siatki z trzema kolumnami (początek / środek / koniec)
header-startModyfikatorLewa szczelina, zazwyczaj mieści logo
header-centerModyfikatorŚrodkowe gniazdo na linki nawigacyjne
header-endModyfikatorPrawe miejsce na akcje i sterowanie
header-stickyModyfikatorTrzyma się na górze podczas przewijania
header-fixedModyfikatorStała pozycja, zawsze widoczna
header-solidStylSolidne, nieprzezroczyste tło
header-transparentStylPrzezroczyste tło
header-blurStylEfekt rozmycia matowego szkła
header-shadowStylDodaje cień pod nagłówkiem
header-smRozmiarMała (kompaktowa) wysokość
header-lgRozmiarDuża wysokość

Podstawowe użycie

Nagłówek wykorzystuje siatkę z trzema kolumnami poprzez header-content: header-start (logo), header-center (opcjonalna nawigacja wyśrodkowana) i header-end (akcje i przełącznik mobilny).

Frutjam logo Frutjam 
 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
<header class="header">
  <div class="header-content">
    <div class="header-start">
      <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>
    </div>
    <div class="header-center"></div>
    <div class="header-end">
      <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>
        </ul>
      </nav>
      <div class="lg:hidden">
        <button type="button" class="btn 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-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="headerToggleMenu1.close()">Close Drawer via Backdrop</button>
        </dialog>
      </div>
    </div>
  </div>
</header>

 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
<header className="header">
  <div className="header-content">
    <div className="header-start">
      <a className="heading-2xl flex items-center" title="frutjam">
        <svg width="32" height="32" className="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 className="header-center"></div>
    <div className="header-end">
      <nav className="navbar hidden lg:flex">
        <ul className="navbar-list gap-x-6">
          <li><a className="link link-xs link-hover">About</a></li>
          <li><a className="link link-xs link-hover">Pricing</a></li>
          <li><a className="link link-xs link-hover">Services</a></li>
        </ul>
      </nav>
      <div className="lg:hidden">
        <button type="button" className="btn btn-sm btn-ghost" onClick={() => headerToggleMenu1.show()}>
          <span className="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 className="drawer drawer-bottom" id="headerToggleMenu1">
          <div className="drawer-content">
            <ul className="menu p-4">
              <li><a className="menu-item">About</a></li>
              <li>
                <div className="accordion accordion-flush">
                  <details>
                    <summary>Resources</summary>
                    <div className="accordion-content">
                      <ul>
                        <li><a className="menu-item">Help center</a></li>
                        <li><a className="menu-item">Products</a></li>
                      </ul>
                    </div>
                  </details>
                </div>
              </li>
              <li><a className="menu-item">Pricing</a></li>
            </ul>
          </div>
          <button type="button" className="drawer-backdrop" onClick={() => headerToggleMenu1.close()}>Close Drawer via Backdrop</button>
        </dialog>
      </div>
    </div>
  </div>
</header>

Wyrównanie paska nawigacyjnego

Wyśrodkowana nawigacja

Umieść nawigację wewnątrz header-center, aby przypiąć ją do środkowej kolumny. Przełącznik mobilny pozostaje w header-end.

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
<header class="header">
  <div class="header-content">
    <div class="header-start">
      <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>
    </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>
        </ul>
      </nav>
    </div>
    <div class="header-end">
      <div class="lg:hidden">
        <button type="button" class="btn 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-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="headerToggleMenu2.close()">Close Drawer via Backdrop</button>
        </dialog>
      </div>
    </div>
  </div>
</header>

Wyśrodkowana nawigacja z przyciskami akcji

Umieść przyciski akcji obok przełącznika mobilnego wewnątrz header-end. Obydwa są ukryte/pokazane w klasach responsywnych.

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
<header class="header">
  <div class="header-content">
    <div class="header-start">
      <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>
    </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>
        </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-primary 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>