跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

Menu Component

CSS-only Tailwind CSS vertical menu for navigation lists. Active, disabled, and icon item states. Size variants. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

選單組件顯示有組織的操作或導覽選項清單。 Frutjam 選單系統採用語義 HTML 清單和連結元素構建，支援垂直和水平佈局、嵌套選單、圖示和活動狀態。選單完全可以透過鍵盤導航進行訪問，與下拉式選單、側邊欄和上下文導航模式無縫整合。

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

班級 類型 描述
menu根據導航或操作項目的垂直列表
menu-item修飾符選單內的單一可點選項目
menu-title修飾符非互動式部分標籤
menu-horizontal修飾符橫向佈局
menu-vertical修飾符垂直佈局（預設）
menu-active修飾符強制項目處於活動/突出顯示狀態
menu-disabled修飾符選單項目的禁用外觀
menu-xs尺寸特小號
menu-sm尺寸小的
menu-md尺寸中（預設）
menu-lg尺寸大的
menu-xl尺寸特大號

基本用法

1
2
3
4
5
<ul class="menu">
  <li><a class="menu-item">Item 1</a></li>
  <li><a class="menu-item">Item 2</a></li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

1
2
3
4
5
<ul className="menu">
  <li><a className="menu-item">Item 1</a></li>
  <li><a className="menu-item">Item 2</a></li>
  <li><a className="menu-item">Item 3</a></li>
</ul>

水平選單

html 
1
2
3
4
5
<ul class="menu menu-horizontal">
  <li><a class="menu-item">Item 1</a></li>
  <li><a class="menu-item">Item 2</a></li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

垂直選單

html 
1
2
3
4
5
<ul class="menu menu-vertical">
  <li><a class="menu-item">Item 1</a></li>
  <li><a class="menu-item">Item 2</a></li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

帶有圖示和文字的選單

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
<ul class="menu">
  <li>
    <a class="menu-item">
      <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">
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
        </path>
      </svg>
      Home
    </a>
  </li>
  <li>
    <a class="menu-item">
      <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">
        <path d="m21 21-4.34-4.34" />
        <circle cx="11" cy="11" r="8" />
      </svg>
      Search
    </a>
  </li>
  <li>
    <a class="menu-item">
      <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">
        <circle cx="12" cy="8" r="5" />
        <path d="M20 21a8 8 0 0 0-16 0" />
      </svg>
      Profile
    </a>
  </li>
</ul>

響應式選單：小螢幕垂直，大螢幕水平

html 
1
2
3
4
5
<ul class="menu  menu-vertical lg:menu-horizontal">
  <li><a class="menu-item">Item 1</a></li>
  <li><a class="menu-item">Item 2</a></li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

菜單尺寸

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<ul class="menu menu-xs w-56">
  <li><a class="menu-item">Xsmall 1</a></li>
  <li><a class="menu-item">Xsmall 2</a></li>
</ul>
<ul class="menu menu-sm w-56">
  <li><a class="menu-item">Small 1</a></li>
  <li><a class="menu-item">Small 2</a></li>
</ul>
<ul class="menu menu-md w-56">
  <li><a class="menu-item">Medium 1</a></li>
  <li><a class="menu-item">Medium 2</a></li>
</ul>
<ul class="menu menu-lg w-56">
  <li><a class="menu-item">Large 1</a></li>
  <li><a class="menu-item">Large 2</a></li>
</ul>
<ul class="menu menu-xl w-56">
  <li><a class="menu-item">Xlarge 1</a></li>
  <li><a class="menu-item">Xlarge 2</a></li>
</ul>

帶標題的菜單

html 
1
2
3
4
5
6
<ul class="menu w-56">
  <li class="menu-title">Title</li>
  <li><a class="menu-item">Item 1</a></li>
  <li><a class="menu-item">Item 2</a></li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

帶有垂直線且標題為父級的選單

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<ul class="menu w-56">
  <li>
    <h2 class="menu-title">Title</h2>
    <ul>
      <li><a class="menu-item">Item 1</a></li>
      <li><a class="menu-item">Item 2</a></li>
      <li><a class="menu-item">Item 3</a></li>
    </ul>
  </li>
</ul>

包含禁用項目的選單

html 
1
2
3
4
5
<ul class="menu w-56">
  <li><a class="menu-item">Enabled item</a></li>
  <li class="menu-disabled"><button disabled class="menu-item">disabled item</button></li>
  <li class="menu-disabled"><a class="menu-item" aria-disabled="true">disabled item</a></li>
</ul>

帶有活動項目的選單

html 
1
2
3
4
5
<ul class="menu">
  <li><a class="menu-item">Item 1</a></li>
  <li><a class="menu-item menu-active">Item 2</a></li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

帶有子選單的選單

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<ul class="menu w-56">
  <li><a class="menu-item">Item 1</a></li>
  <li>
    <a class="menu-item">Parent</a>
    <ul>
      <li><a class="menu-item">Submenu 1</a></li>
      <li><a class="menu-item">Submenu 2</a></li>
      <li>
        <a class="menu-item">Parent</a>
        <ul>
          <li><a class="menu-item">Submenu 1</a></li>
          <li><a class="menu-item">Submenu 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

帶有可折疊子菜單的菜單

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
<ul class="menu w-56">
  <li><a class="menu-item">Item 1</a></li>
  <li>
    <div class="accordion accordion-flush">
      <details open>
        <summary>Parent</summary>
        <div class="accordion-content">
          <ul>
            <li><a class="menu-item">Submenu 1</a></li>
            <li><a class="menu-item">Submenu 2</a></li>
            <li>
              <div class="accordion accordion-flush">
                <details open>
                  <summary>Parent</summary>
                  <div class="accordion-content">
                    <ul>
                      <li><a class="menu-item menu-active">Submenu 1</a></li>
                      <li><a class="menu-item">Submenu 2</a></li>
                    </ul>
                  </div>
                </details>
              </div>
            </li>
          </ul>
        </div>
      </details>
    </div>
  </li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

僅帶有圖示的垂直選單

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
<ul class="menu">
  <li>
    <a class="menu-item">
      <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">
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
        </path>
      </svg>
    </a>
  </li>
  <li>
    <a class="menu-item">
      <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">
        <path d="m21 21-4.34-4.34" />
        <circle cx="11" cy="11" r="8" />
      </svg>
    </a>
  </li>
  <li>
    <a class="menu-item">
      <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">
        <circle cx="12" cy="8" r="5" />
        <path d="M20 21a8 8 0 0 0-16 0" />
      </svg>
    </a>
  </li>
</ul>

僅帶有圖標的水平菜單

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
<ul class="menu menu-horizontal">
  <li>
    <a class="menu-item">
      <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">
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
        </path>
      </svg>
    </a>
  </li>
  <li>
    <a class="menu-item">
      <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">
        <path d="m21 21-4.34-4.34" />
        <circle cx="11" cy="11" r="8" />
      </svg>
    </a>
  </li>
  <li>
    <a class="menu-item">
      <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">
        <circle cx="12" cy="8" r="5" />
        <path d="M20 21a8 8 0 0 0-16 0" />
      </svg>
    </a>
  </li>
</ul>

僅帶有圖示和工具提示的選單

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
<ul class="menu">
  <li>
    <a class="menu-item tooltip tooltip-end" data-tip="Home">
      <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">
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
        </path>
      </svg>
    </a>
  </li>
  <li>
    <a class="menu-item tooltip tooltip-end" data-tip="Search">
      <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">
        <path d="m21 21-4.34-4.34" />
        <circle cx="11" cy="11" r="8" />
      </svg>
    </a>
  </li>
  <li>
    <a class="menu-item tooltip tooltip-end" data-tip="Profile">
      <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">
        <circle cx="12" cy="8" r="5" />
        <path d="M20 21a8 8 0 0 0-16 0" />
      </svg>
    </a>
  </li>
</ul>

僅帶有圖示的選單（水平）和工具提示

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
<ul class="menu menu-horizontal">
  <li>
    <a class="menu-item tooltip" data-tip="Home">
      <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">
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
        </path>
      </svg>
    </a>
  </li>
  <li>
    <a class="menu-item tooltip" data-tip="Search">
      <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">
        <path d="m21 21-4.34-4.34" />
        <circle cx="11" cy="11" r="8" />
      </svg>
    </a>
  </li>
  <li>
    <a class="menu-item tooltip" data-tip="Profile">
      <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">
        <circle cx="12" cy="8" r="5" />
        <path d="M20 21a8 8 0 0 0-16 0" />
      </svg>
    </a>
  </li>
</ul>

帶有圖標和徽章的選單（響應式）

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
<ul class="menu menu-vertical lg:menu-horizontal">
  <li>
    <a class="menu-item">
      <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">
        <path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
        </path>
      </svg>
      Home
      <span class="badge badge-xs">99+</span>
    </a>
  </li>
  <li>
    <a class="menu-item">
      <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">
        <path d="m21 21-4.34-4.34" />
        <circle cx="11" cy="11" r="8" />
      </svg>
      Search
    </a>
  </li>
  <li>
    <a class="menu-item">
      <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">
        <circle cx="12" cy="8" r="5" />
        <path d="M20 21a8 8 0 0 0-16 0" />
      </svg>
      Profile
      <span class="badge badge-primary badge-xs badge-circle"></span>
    </a>
  </li>
</ul>

文件樹

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
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<ul class="menu menu-xs max-w-xs w-full">
  <li>
    <a class="menu-item">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
      work-report.pdf
    </a>
  </li>
  <li>
    <div class="accordion accordion-flush">
      <details open>
        <summary>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path
              d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
          </svg>
          My Files
        </summary>
        <div class="accordion-content">
          <ul>
            <li>
              <a class="menu-item">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path
                    d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
                  <path d="M14 2v5a1 1 0 0 0 1 1h5" />
                </svg>
                final-project-2.psd
              </a>
            </li>
            <li>
              <a class="menu-item">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path
                    d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
                  <path d="M14 2v5a1 1 0 0 0 1 1h5" />
                </svg>
                final-project-2.psd
              </a>
            </li>
            <li>
              <div class="accordion accordion-flush">
                <details open>
                  <summary>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                      class="h-4 w-4">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
                    </svg>
                    Images
                  </summary>
                  <div class="accordion-content">
                    <ul>
                      <li>
                        <a class="menu-item">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><circle cx="10" cy="12" r="2"/><path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"/></svg>
                          Screenshot1.png
                        </a>
                      </li>
                      <li>
                        <a class="menu-item">
                          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><circle cx="10" cy="12" r="2"/><path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"/></svg>
                          Screenshot2.png
                        </a>
                      </li>
                      <li>
                        <div class="accordion accordion-flush">
                          <details open>
                            <summary>
                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                class="h-4 w-4">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
                              </svg>
                              Others
                            </summary>
                            <div class="accordion-content">
                              <ul>
                                <li>
                                  <a class="menu-item">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                      <path
                                        d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
                                      <path d="M14 2v5a1 1 0 0 0 1 1h5" />
                                      <circle cx="10" cy="12" r="2" />
                                      <path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" />
                                    </svg>
                                    Screenshot3.png
                                  </a>
                                </li>
                              </ul>
                            </div>
                          </details>
                        </div>
                      </li>
                    </ul>
                  </div>
                </details>
              </div>
            </li>
          </ul>
        </div>
      </details>
    </div>
  </li>
  <li>
    <a class="menu-item">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
      </svg>
      reports-final-2.pdf
    </a>
  </li>
</ul>

水平子選單

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<ul class="menu menu-horizontal">
  <li><a class="menu-item">Item 1</a></li>
  <li>
    <a class="menu-item">Parent</a>
    <ul>
      <li><a class="menu-item">Submenu 1</a></li>
      <li><a class="menu-item">Submenu 2</a></li>
    </ul>
  </li>
  <li><a class="menu-item">Item 3</a></li>
</ul>

帶有子選單的大型選單（響應式）

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
<ul class="menu xl:menu-horizontal lg:min-w-max">
  <li>
    <a class="menu-item">Solutions</a>
    <ul>
      <li><a class="menu-item">Design</a></li>
      <li><a class="menu-item">Development</a></li>
      <li><a class="menu-item">Hosting</a></li>
      <li><a class="menu-item">Domain register</a></li>
    </ul>
  </li>
  <li>
    <a class="menu-item">Enterprise</a>
    <ul>
      <li><a class="menu-item">CRM software</a></li>
      <li><a class="menu-item">Marketing management</a></li>
      <li><a class="menu-item">Security</a></li>
      <li><a class="menu-item">Consulting</a></li>
    </ul>
  </li>
  <li>
    <a class="menu-item">Products</a>
    <ul>
      <li><a class="menu-item">UI Kit</a></li>
      <li><a class="menu-item">WordPress themes</a></li>
      <li><a class="menu-item">WordPress plugins</a></li>
      <li>
        <a class="menu-item">Open source</a>
        <ul>
          <li><a class="menu-item">Auth management system</a></li>
          <li><a class="menu-item">VScode theme</a></li>
          <li><a class="menu-item">Color picker app</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a class="menu-item">Company</a>
    <ul>
      <li><a class="menu-item">About us</a></li>
      <li><a class="menu-item">Contact us</a></li>
      <li><a class="menu-item">Privacy policy</a></li>
      <li><a class="menu-item">Press kit</a></li>
    </ul>
  </li>
</ul>

可折疊子選單（響應式）

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
<ul class="menu lg:menu-horizontal">
  <li><a class="menu-item">Item 1</a></li>
  <li>
    <div class="accordion accordion-flush">
      <details open>
        <summary>Parent item</summary>
        <div class="accordion accordion-flush">
          <ul>
            <li><a class="menu-item">Submenu 1</a></li>
            <li><a class="menu-item">Submenu 2</a></li>
            <li>
              <div class="accordion accordion-flush">
                <details open>
                  <summary>Parent</summary>
                  <div class="accordion-content">
                    <ul>
                      <li><a class="menu-item">item 1</a></li>
                      <li><a class="menu-item">item 2</a></li>
                    </ul>
                  </div>
                </details>
              </div>
            </li>
          </ul>
        </div>
      </details>
    </div>
  </li>
  <li><a class="menu-item">Item 3</a></li>
</ul>