Componentes/Floating Menu

Floating Menu

Menu flutuante genérico do TRDR — compound component com Item, Title e Divider. Cobre desde listas simples de ações até menus seccionados com ícones Material Symbols. Usado em Janela, seletor de ativo, configurações, indicadores e notificações.

Floating Menus

Figma: 1921:55380

Preview

Ações da janela (sem título)

Com título e divisor (seletor de ativo)

Com seções e indicadores

Item desabilitado

Código

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

<!-- Floating Menu TRDR — HTML com classes globais -->

<!-- Exemplo 1: ações simples (sem título) -->
<div class="trdr-floating-menu" style="width:172px" role="menu">
  <button class="trdr-floating-menu-item" role="menuitem">
    <span class="material-symbols-outlined" style="font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)">close</span>
    Fechar
  </button>
  <button class="trdr-floating-menu-item" role="menuitem">
    <span class="material-symbols-outlined" style="font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)">remove</span>
    Minimizar
  </button>
  <button class="trdr-floating-menu-item" role="menuitem">
    <span class="material-symbols-outlined" style="font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)">keep</span>
    Fixar
  </button>
</div>

<!-- Exemplo 2: com título, divisor e seções -->
<div class="trdr-floating-menu" style="width:240px" role="menu">
  <p class="trdr-floating-menu-title">Favoritos</p>
  <button class="trdr-floating-menu-item" role="menuitem">
    <span class="material-symbols-outlined" style="font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)">star</span>
    WINFUT (Q19)
  </button>
  <button class="trdr-floating-menu-item" role="menuitem">
    <span class="material-symbols-outlined" style="font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)">star</span>
    PETR4
  </button>
  <div class="trdr-floating-menu-divider" role="separator"></div>
  <p class="trdr-floating-menu-title">Recentes</p>
  <button class="trdr-floating-menu-item" role="menuitem">
    <span class="material-symbols-outlined" style="font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)">history</span>
    BBDC4
  </button>
  <div class="trdr-floating-menu-divider" role="separator"></div>
  <button class="trdr-floating-menu-item" role="menuitem">
    <span class="material-symbols-outlined" style="font-size:20px;line-height:20px;font-variation-settings:'FILL' 0,'GRAD' 0;color:var(--content-tertiary)">search</span>
    Buscar ativo...
  </button>
</div>

Dimensões

Variante	Largura	Altura
Item height	`—`	`32px`
Menu padding	`8px`	`8px`
Ações da janela (5 itens)	`172px`	`192px`
Notificações (4 itens)	`300px`	`182px`
Configurações (5 itens + dropdown)	`260px`	`239px`

Props / Variantes

Prop	Tipo	Valores
`width`	number \| string	`172240260280300auto`
`children`	ReactNode	`FloatingMenu.Item, FloatingMenu.Title, FloatingMenu.Divider, custom content`
`Item.icon`	string	`nome do Material Symbols (ex: "close", "star", "search")`
`Item.disabled`	boolean	`truefalse`
`Item.onClick`	function	`() => void`
`Title.size`	enum	`"default" (14px)"sm" (10px)`

Tokens Utilizados

Propriedade	Token	Valor
Menu background	`bg.secondary`	`#141519`
Menu border	`border.subtle`	`#222222`
Menu border-radius	`radius.md`	`8px`
Item border-radius	`radius.sm`	`4px`
Item label color	`content.secondary`	`#E8E8E8`
Item icon color	`content.tertiary`	`#A4A4A4`
Item hover background	`surface.secondary`	`#222222`
Title color	`content.tertiary`	`#A4A4A4`
Divider color	`border.subtle`	`#222222`
Menu gap	`spacing.xs`	`4px`
Item padding	`spacing.sm`	`8px`

Anatomia

Container: bg-secondary, border-subtle, radius-md 8px, shadow 0 4px 12px rgba(0,0,0,0.3), padding 8px, gap 4px

FloatingMenu.Title — rótulo de seção: content-tertiary, 14px (padrão) ou 10px (size="sm"), padding-left 8px
FloatingMenu.Item — botão: 32px height, padding 0 8px, gap 8px, radius-sm 4px
  └ [Icon?: 20px Material Symbols Outlined, content-tertiary] [Label: Inter 14px, content-secondary, flex-1]
  └ :hover → background surface-secondary | :disabled → opacity 0.45, cursor not-allowed
FloatingMenu.Divider — separador: 1px solid border-subtle, full-width