Dropdowns | DS CANTA.

Select Nativo

<select class="canta-select">
  <option value="">Selecione uma opcao...</option>
  <option value="1">Opcao 1</option>
  <option value="2">Opcao 2</option>
  <option value="3">Opcao 3</option>
</select>

Tamanhos

<select class="canta-select canta-select--sm">...</select>
<select class="canta-select">...</select>
<select class="canta-select canta-select--lg">...</select>

Estados

<select class="canta-select canta-select--error">...</select>
<select class="canta-select canta-select--success">...</select>
<select class="canta-select" disabled>...</select>

Com Icone

search

<div class="canta-select-wrapper">
  <span class="canta-select-wrapper__icon">
    <span class="material-symbols-rounded">search</span>
  </span>
  <select class="canta-select canta-select--with-icon">
    <option value="">Buscar categoria...</option>
    <option value="1">Design</option>
  </select>
</div>

Select Multiplo

<select class="canta-select canta-select--multiple" multiple>
  <option value="1">JavaScript</option>
  <option value="2">TypeScript</option>
  <option value="3">PHP</option>
</select>

Dropdown Menu

Para menus dropdown customizados (nao select nativo), use o padrao de dropdown da Navbar: .canta-navbar__dropdown. O menu abre ao passar o mouse ou com a classe --open.

<div class="canta-navbar__dropdown">
  <button class="canta-navbar__dropdown-trigger">
    Acoes <span class="canta-navbar__dropdown-icon"></span>
  </button>
  <ul class="canta-navbar__dropdown-menu">
    <li class="canta-navbar__dropdown-item">
      <a href="#" class="canta-navbar__dropdown-link">Editar</a>
    </li>
    <li class="canta-navbar__dropdown-item">
      <a href="#" class="canta-navbar__dropdown-link">Duplicar</a>
    </li>
    <li class="canta-navbar__dropdown-divider"></li>
    <li class="canta-navbar__dropdown-item">
      <a href="#" class="canta-navbar__dropdown-link">Excluir</a>
    </li>
  </ul>
</div>

<!-- Para abrir via JS, adicione a classe --open -->
<div class="canta-navbar__dropdown canta-navbar__dropdown--open">
  ...
</div>

API

Classe	Descricao
Select Nativo
`.canta-select`	Classe base do select (borda brutalista, seta customizada)
`.canta-select--sm`	Tamanho pequeno
`.canta-select--lg`	Tamanho grande
`.canta-select--error`	Estado de erro (borda vermelha)
`.canta-select--success`	Estado de sucesso (borda verde)
`.canta-select--multiple`	Select multiplo (sem seta, min-height 120px)
`.canta-select--with-icon`	Padding esquerdo maior para icone
`.canta-select-wrapper`	Container para select com icone
`.canta-select-wrapper__icon`	Icone posicionado a esquerda
Dropdown Menu
`.canta-navbar__dropdown`	Container do dropdown (position relative)
`.canta-navbar__dropdown-trigger`	Botao que abre o menu
`.canta-navbar__dropdown-icon`	Seta indicadora (rotaciona ao abrir)
`.canta-navbar__dropdown-menu`	Menu suspenso (sombra brutalista)
`.canta-navbar__dropdown-item`	Item do menu
`.canta-navbar__dropdown-link`	Link clicavel do item
`.canta-navbar__dropdown-link--active`	Link ativo (fundo preto)
`.canta-navbar__dropdown-divider`	Separador horizontal (2px)
`.canta-navbar__dropdown--open`	Forca dropdown aberto via JS