Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente do menu

Última atualização:

Menu vertical Tailwind CSS somente CSS para listas de navegação. Estados de itens ativos, desativados e de ícone. Variantes de tamanho. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes do menu exibem listas organizadas de ações ou opções de navegação. Construído com listas HTML semânticas e elementos de link, o sistema de menu Frutjam oferece suporte a layouts verticais e horizontais, menus aninhados, ícones e estados ativos. Totalmente acessíveis com navegação por teclado, os menus integram-se perfeitamente com menus suspensos, barras laterais e padrões de navegação contextual.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
menuBaseLista vertical de itens de navegação ou ação
menu-itemModificadorItem clicável individual dentro do menu
menu-titleModificadorEtiqueta de seção não interativa
menu-horizontalModificadorLayout horizontal
menu-verticalModificadorLayout vertical (padrão)
menu-activeModificadorForça o estado ativo/destacado em um item
menu-disabledModificadorAparência desativada para um item de menu
menu-xsTamanhoExtra pequeno
menu-smTamanhoPequeno
menu-mdTamanhoMédio (padrão)
menu-lgTamanhoGrande
menu-xlTamanhoExtra grande

Uso Básico

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 horizontal

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 vertical

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 com ícone e texto

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 responsivo: vertical na tela pequena, horizontal na tela grande

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>

Tamanhos de 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 com título

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 com linha vertical com título como pai

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 com itens desativados

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 com item ativo

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 com 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 com submenu dobrável

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 vertical apenas com ícone

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 apenas com ícone

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 com ícone apenas com dica de ferramenta

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 apenas com ícone (horizontal) com dica de ferramenta

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 com ícones e emblema (responsivo)

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>

Árvore de arquivos

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 horizontal

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 menu com submenu (responsivo)

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>

Dobrável com submenu (responsivo)

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>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Menu e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP