O componente Dropdown do Foundation Sites oferece uma solução robusta para implementar menus contextuais e painéis de conteúdo dinâmico. Este guia explora suas funcionalidades essenciais com exemplos práticos atualizados.

Estrutura Básica e Funcionamento

O sistema opera com dois elementos fundamentais: o elemento disparador e o painel oculto. Veja uma implementação mínima:

<!-- Botão disparador -->
<button class="botao-menu" type="button" data-aciona="menu-contextual">
  Abrir menu
</button>

<!-- Painel dropdown -->
<div class="dropdown-pane" id="menu-contextual" data-dropdown data-autofoco="sim">
  <h4 class="titulo-menu">Opções disponíveis</h4>
  <p>Conteúdo personalizável com qualquer marcação HTML.</p>
  <button class="botao-acao">Confirmar</button>
</div>

Sistema de Posicionamento Avançado

O Foundation utiliza um modelo bidimensional para posicionamento, combinando direção e alinhamento:

• Direções principais: superior, inferior (padrão), esquerda, direita
• Alinhamentos: esquerda, centro, direita (para direções horizontais)

Exemplo de posicionamento preciso:

<button data-aciona="menu-topo-centro">Menu superior centralizado</button>
<div class="dropdown-pane" 
     data-posicao="superior" 
     data-alinhamento="centro"
     id="menu-topo-centro"
     data-dropdown>
  Conteúdo alinhado acima do botão
</div>

Configurações JavaScript Personalizadas

Para controle refinado, inicialize via script com parâmetros específicos:

const menuConfigurado = new Foundation.Dropdown(
  document.getElementById('menu-dinamico'), {
  atrasoHover: 250,
  habilitarHover: true,
  margemVertical: 8,
  margemHorizontal: 12,
  posicaoPadrao: 'inferior',
  alinhamentoPadrao: 'direita',
  focoAutomatico: false,
  fecharAoClicarFora: true
});

Personalização com SCSS

Adapte visualmente através de variáveis do Sass:

// Variáveis de estilo
$dropdown-padding: 1.2rem;
$dropdown-bg: #f8f9fa;
$dropdown-borda: 1px solid #ddd;
$dropdown-raio: 6px;

// Tamanhos pré-definidos
$dropdown-tamanhos: (
  compacto: 150px,
  padrao: 280px,
  expandido: 450px
);

// Classe personalizada
.dropdown-pane.personalizado {
  width: 350px;
  max-height: 400px;
  overflow: auto;
}

Cenários de Aplicação Prática

Filtros dinâmicos em interfaces:

<div class="dropdown-pane" id="filtros-produto" data-dropdown>
  <div class="grid-x">
    <div class="cell small-6">
      <label>Categoria
        <select>
          <option>Eletrônicos</option>
          <option>Vestuário</option>
        </select>
      </label>
    </div>
    <div class="cell small-6">
      <label>Preço Máximo
        <input type="number" min="0">
      </label>
    </div>
  </div>
  <button class="aplicar-filtros">Filtrar</button>
</div>

Notificações com estado visual:

<div class="dropdown-pane" data-posicao="inferior" data-alinhamento="direita">
  <div class="lista-notificacoes">
    <div class="item novo">
      <span class="conteudo">Nova atualização disponível</span>
      <time>há 5 minutos</time>
    </div>
    <div class="item lido">
      <span class="conteudo">Processo concluído</span>
      <time>há 2 horas</time>
    </div>
  </div>
</div>

Solução de Problemas Comuns

Posicionamento incorreto em layouts responsivos:

// Atualização dinâmica ao redimensionar
window.addEventListener('resize', () => {
  document.querySelectorAll('[data-dropdown]').forEach(element => {
    Foundation.reflow(element);
  });
});

Controle de sobreposição em telas pequenas:

new Foundation.Dropdown('#menu-mobile', {
  permitirSobreposicao: false,
  ajusteAutomatico: true
});