Dropdown / Menu flutuante

Tipo: Core

DesignersFigmaAinda não disponível
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

Um menu suspenso exibe uma lista de ações ou opções em um painel temporário. Ele pode conter multiníveis (submenus), permitindo organizar grandes volumes de comandos em categorias hierárquicas que são reveladas ao passar o mouse ou clicar.

Diretrizes de Comportamento

Navegação Multinível: Use uma seta para a direita (ícone) para indicar que um item abre um submenu.
Sem Reticências em Submenus: Não utilize reticências (…) para itens que apenas abrem um submenu. A seta visual já comunica que há mais opções.
- Certo: Exportar Documentos > (Abre lista de formatos).
- Errado: Exportar Documentos… >
Nomes de Categorias: O item pai deve ser curto e categórico.
- Exemplo: Filtros Avançados, Relatórios de Frota.
Limitação de Níveis: Evite ultrapassar dois níveis de profundidade (Menu > Submenu) para não dificultar a navegação e a leitura rápida.
Vá Direto ao Ponto: Mantenha a Caixa de Título em todos os níveis para consistência.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<menu role="menu" class="mds-dropdown__menu mds-dropdown__menu--show animate-to-bottom--in">
      <div class="mds-dropdown__wrap overflow-x-hidden">
        <div class="mds-dropdown__panels" style="transform: translateX(0px);">
        <div class="mds-dropdown__panel mds-dropdown__menu__primary show" style="position: static; display: block;">
          <h6 class="mds-menu-header">mds-Dropdown header</h6>
          <a class="mds-menu-item" href="#"><i data-lucide="truck"></i> Action</a>
          <a class="mds-menu-item" href="#"><i data-lucide="user"></i> Another action</a>
          <a class="mds-menu-item" href="#"><i data-lucide="box-check"></i> Something else here</a>
          <span class="mds-menu-item-text"><i data-lucide="acorn"></i> mds-Dropdown item text</span>
          <div class="mds-dropdown-divider"></div>
          <a class="mds-menu-item" href="#"><i data-lucide="alicorn"></i> Regular link</a>
          <a class="mds-menu-item active" href="#"><i data-lucide="angel"></i> Active link</a>
          <div class="mds-dropdown-divider"></div>
          <a class="mds-menu-item disabled" href="#" tabindex="-1" aria-disabled="true">
            <i data-lucide="angry"></i> Disabled link
          </a>
        </div>
        </div>
      </div>
    </menu>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`isOpen`	`true` · `false`	`true`
`header`	—	`mds-Dropdown header`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-dropdown` `.mds-dropdown-item-text`
Elementos	`.mds-dropdown__arrow` `.mds-dropdown__divider` `.mds-dropdown__item` `.mds-dropdown__item__icon` `.mds-dropdown__item__icon-back` `.mds-dropdown__item__icon-submenu` `.mds-dropdown__menu` `.mds-dropdown__menu__submenu` `.mds-dropdown__panel` `.mds-dropdown__panels` `.mds-dropdown__toggle`
Modificadores	`.mds-dropdown__item--active` `.mds-dropdown__item--disabled` `.mds-dropdown__item--flex` `.mds-dropdown__menu__submenu--nested` `.mds-dropdown__menu--show` `.mds-dropdown__toggle--no-caret`

Angular (mds-angular)

Seletor

mds-dropdown

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`'d-contents'`	Classe CSS customizada adicionada ao host
`variant`	`MdsDropdownVariants`	`'control'`	Define o estilo do dropdown.
`size`	`MdsSizes`	`'md'`	Define o tamanho do dropdown.
`label`	`string \| undefined`	`undefined`	O texto a ser exibido no dropdown.
`tooltip`	`string \| undefined`	`undefined`	O texto a ser exibido no tooltip do botao caso nao exista um label.
`icon`	`MdsIconAlias \| undefined`	`undefined`	O ícone a ser exibido no dropdown.
`additionalClass`	`string \| undefined`	`undefined`	Classes CSS adicionais para o botão do dropdown.
`buttonStyle`	`Record<string, string \| undefined`	`undefined`	Estilos CSS para o botão do dropdown.
`customTemplate`	`TemplateRef<unknown \| undefined`	`undefined`	Template customizado para o botão do dropdown.
`outline`	`boolean`	`false`	Se o dropdown deve ter um contorno.
`caret`	`boolean`	`true`	Se o dropdown deve exibir o ícone de seta.
`disabled`	`boolean`	`false`	Se o dropdown está desabilitado.
`loading`	`boolean`	`false`	Se o dropdown está em estado de carregamento.
`itemOption`	`boolean`	`false`	Se o item do dropdown é uma opção.
`placement`	`MdsPlacement`	`'bottom-start'`	A posição do menu do dropdown.
`ariaLabel`	`string \| undefined`	`undefined`	O `aria-label` para o botão do dropdown.
`display`	`MdsDropdownDislays`	`'dynamic'`	O modo de exibição do dropdown.
`contextBase`	`MdsDropdownContextBase`	`'body'`	O elemento base para o contexto do dropdown.
`positionBy`	`MdsDropdownPositionBy`	`'cursor'`	A referência de posicionamento do dropdown.
`dropdownContent`	`TemplateRef<unknown`	—	O conteúdo a ser exibido no menu do dropdown.
`autoClose`	`MdsDropdownAutoClose`	`true`	Define o comportamento de fechamento automático do dropdown.
`triggers`	`('click' \| 'hover')[]`	`['click']`	Os gatilhos que abrem o dropdown.
`elementRef`	`ElementRef`	`undefined`	A referência do elemento a ser usado como gatilho do dropdown.
`useArrow`	`boolean`	`false`	Se o dropdown deve usar uma seta.
`useShift`	`boolean`	`true`	Se o dropdown deve usar a funcionalidade de deslocamento.
`shiftPadding`	`number`	`0`	O preenchimento para a funcionalidade de deslocamento.
`submenuBehavior`	`'dropdown' \| 'slide'`	`'slide'`	O comportamento do submenu.

Outputs

Output	Payload	Descrição
`onClose`	`void`	Evento emitido quando o dropdown é fechado.
`openChange`	`boolean`	Evento emitido quando o estado de aberto/fechado do dropdown muda.

Storybook mds-styles (HTML/CSS) — components-dropdown ↗