Skip to main content
Frutjam logoFrutjam
v2.2.6
Theme

Menükomponente

Zuletzt aktualisiert:

Nur CSS-vertikales Tailwind CSS-Menü für Navigationslisten. Aktive, deaktivierte und Symbolelementstatus. Größenvarianten. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Menükomponenten zeigen organisierte Listen mit Aktionen oder Navigationsoptionen an. Das Frutjam-Menüsystem basiert auf semantischen HTML-Listen und Link-Elementen und unterstützt vertikale und horizontale Layouts, verschachtelte Menüs, Symbole und aktive Zustände. Die Menüs sind über die Tastaturnavigation vollständig zugänglich und lassen sich nahtlos in Dropdown-Listen, Seitenleisten und kontextbezogene Navigationsmuster integrieren.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

KlasseTypBeschreibung
menuBaseVertikale Liste von Navigations- oder Aktionselementen
menu-itemModifikatorEinzelnes anklickbares Element im Menü
menu-titleModifikatorNicht interaktive Abschnittsbezeichnung
menu-horizontalModifikatorHorizontales Layout
menu-verticalModifikatorVertikales Layout (Standard)
menu-activeModifikatorErzwingt den aktiven/hervorgehobenen Status für ein Element
menu-disabledModifikatorDeaktivierte Darstellung für einen Menüpunkt
menu-xsGrößeExtra klein
menu-smGrößeKlein
menu-mdGrößeMittel (Standard)
menu-lgGrößeGroß
menu-xlGrößeExtra groß

Grundlegende Verwendung

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>

Horizontales Menü

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>

Vertikales Menü

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>

Menü mit Symbol und Text

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>

Responsives Menü: vertikal auf kleinem Bildschirm, horizontal auf großem Bildschirm

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>

Menügrößen

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>

Menü mit Titel

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>

Menü mit vertikaler Linie und Titel als übergeordnetes Menü

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>

Menü mit deaktivierten Elementen

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>

Menü mit aktivem Element

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>

Menü mit Untermenü

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>

Menü mit ausklappbarem Untermenü

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>

Vertikales Menü nur mit Symbol

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>

Horizontales Menü nur mit Symbol

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>

Menü mit Symbol nur mit 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>

Menü nur mit Symbol (horizontal) mit 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>

Menü mit Symbolen und Abzeichen (responsiv)

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>

Dateibaum

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>

Horizontales Untermenü

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>

Mega-Menü mit Untermenü (responsiv)

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>

Zusammenklappbar mit Untermenü (responsiv)

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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Speisekarte-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP