O dropdown declarativo cobre abertura controlada, fechamento interno ou externo, navegação por setas, Home, End e suporte a container="body".

Descrição

Use liDropdown no host, liDropdownToggle no gatilho, liDropdownMenu no menu e liDropdownItem nos itens focáveis.

Recursos

open(), close() e toggle() via API.
autoClose com modos true, false, inside e outside.
Posicionamento com Popper e fallback para navbar estática.

Limitações

O demo foca o comportamento estrutural do dropdown.
Itens desabilitados saem da navegação por teclado.
Menus muito complexos ainda podem pedir componentização própria.

Default dropdown

Abertura simples com foco por teclado nos itens do menu.

Manual and custom triggers

A âncora visual pode ser separada do fluxo de toggle quando você quer controlar a abertura por API.

autoClose inside

O menu abaixo ignora clique externo e só fecha quando o clique acontece dentro do próprio menu.

Container body

Quando existe clipping local, o menu pode ser anexado diretamente ao body.

Dropup

A primeira placement começando por top troca a classe do host para dropup.

Static display in navbar

Dentro de navbar, o display padrão vira estático para preservar o comportamento responsivo.

Estado atual

A API pública separa claramente host, âncora, toggle, menu e item navegável.

liDropdown controla estado aberto, autoClose, placement e container.
liDropdownAnchor fornece a âncora visual sem alternar o estado por clique.
liDropdownToggle alterna o menu por clique e por teclado.
liDropdownMenu recebe classes de menu e delega a navegação por teclado.
liDropdownItem marca itens focáveis e retira itens desabilitados da rotação.

<div liDropdown>
  <button liDropdownToggle>Actions</button>
  <div liDropdownMenu>
    <button liDropdownItem>View details</button>
    <button liDropdownItem>Archive</button>
  </div>
</div>

<div liDropdown autoClose="inside" container="body">
  <button liDropdownToggle>Open on body</button>
  <div liDropdownMenu>
    <button liDropdownItem>Item 1</button>
    <button liDropdownItem [disabled]="true">Disabled</button>
  </div>
</div>

<div liDropdown #drop="liDropdown" [autoClose]="false">
  <button liDropdownAnchor>Anchor only</button>
  <button type="button" (click)="drop.toggle()">Toggle by API</button>
  <div liDropdownMenu>
    <button liDropdownItem (click)="drop.close()">Close</button>
  </div>
</div>

Componentes Dropdown