Skip to main content
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.

Komponen menu menampilkan daftar tindakan atau opsi navigasi yang terorganisir. Dibangun dengan daftar HTML semantik dan elemen tautan, sistem menu Frutjam mendukung tata letak vertikal dan horizontal, menu bersarang, ikon, dan status aktif. Dapat diakses sepenuhnya dengan navigasi keyboard, menu terintegrasi secara mulus dengan dropdown, sidebar, dan pola navigasi kontekstual.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
menuBasisDaftar vertikal item navigasi atau tindakan
menu-itemPengubahItem individual yang dapat diklik di dalam menu
menu-titlePengubahLabel bagian non-interaktif
menu-horizontalPengubahTata letak horizontal
menu-verticalPengubahTata letak vertikal (default)
menu-activePengubahMemaksa status aktif/disorot pada suatu item
menu-disabledPengubahMenonaktifkan tampilan item menu
menu-xsUkuranSangat kecil
menu-smUkuranKecil
menu-mdUkuranSedang (standar)
menu-lgUkuranBesar
menu-xlUkuranEkstra besar

Penggunaan Dasar

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>

Menu Horisontal

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>

Menu Vertikal

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>

Menu dengan ikon dan teks

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>

Menu Responsif: vertikal di layar kecil, horizontal di layar besar

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>

Ukuran menu

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>

Menu dengan judul

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>

Menu dengan garis vertikal dengan judul sebagai induk

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>

Menu dengan item yang dinonaktifkan

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>

Menu dengan item aktif

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>

Menu dengan submenu

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>

Menu dengan submenu yang dapat dilipat

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>

Menu Vertikal dengan ikon saja

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>

Menu Horizontal dengan ikon saja

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>

Menu dengan ikon hanya dengan tooltip

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>

Menu dengan ikon saja (horizontal) dengan tooltip

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>

Menu dengan ikon dan lencana (responsif)

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>

Pohon berkas

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>

Submenu horisontal

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>

Menu mega dengan submenu (responsif)

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>

Dapat dilipat dengan submenu (responsif)

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>