Componentes/Sub-menu Item

Sub-menu Item

Item de sub-menu com estados Default, Hover e Pressed.

Navegação
Figma: 1886:20967

Preview

Código

Copie e cole no Claude Code para implementar este componente em pixel-perfect usando os tokens TRDR.

<div class="trdr-sub-menu">
  <div class="trdr-sub-menu-item trdr-sub-menu-item-active">
    <span class="material-symbols-outlined" style="font-size:20px;color:var(--content-tertiary)">palette</span>
    <span>Todos os tokens</span>
  </div>
  <div class="trdr-sub-menu-item">
    <span class="material-symbols-outlined" style="font-size:20px;color:var(--content-tertiary)">widgets</span>
    <span>Catálogo</span>
  </div>
  <div class="trdr-sub-menu-item">
    <span class="material-symbols-outlined" style="font-size:20px;color:var(--content-tertiary)">smart_toy</span>
    <span>Guia &amp; Regras</span>
  </div>
</div>

Dimensões

VarianteLarguraAltura
Default236px32px

Props / Variantes

PropTipoValores
Stateenum
DefaultHoverPressed

Tokens Utilizados

PropriedadeTokenValor
BG hoversurface.secondary
#222222
Textcontent.secondary
#E8E8E8