跳至主要內容
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.

標題組件為您的網站或應用程式創建一致的頂部導航和品牌區域。 Frutjam 標頭系統採用語義 HTML 標頭元素構建，將徽標、導航連結和使用者操作組合成一個有凝聚力的響應式欄。支援多種佈局、對齊選項，並與下拉式選單和搜尋功能無縫整合。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
header根據頂部導覽列容器
header-content修飾符三列網格佈局（開始/中心/結束）
header-start修飾符左側插槽，通常放置徽標
header-center修飾符導航連結的中心槽
header-end修飾符用於操作和控制的右側插槽
header-sticky修飾符黏在捲軸的頂部
header-fixed修飾符固定位置，始終可見
header-solid風格固體不透明背景
header-transparent風格透明背景
header-blur風格磨砂玻璃模糊效果
header-shadow風格在標題下方新增陰影
header-sm尺寸高度小（緊湊）
header-lg尺寸高度大

基本用法

標題透過 header-content 使用三個欄位網格：header-start（標誌）、header-center（可選的居中導航）和 header-end（操作和移動切換）。

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>

導覽列對齊

居中導航

將導航放置在 header-center 內，將其固定到中間列。移動切換保持在 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>

帶操作按鈕的居中導航

將操作按鈕放在 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
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>