22/Acciones y etiquetas

Dropdown

Menú desplegable genérico con navegación por teclado, atajos, separadores y acciones destructivas.

Menú de acciones

Con role="menu" en el panel, las flechas recorren los elementos y Home/End van al inicio y al final.

HTML

<div class="cb-dropdown self-start" data-cb-dropdown>
  <button class="cb-btn cb-btn--outline" type="button" data-cb-dropdown-trigger>Acciones <svg class="cb-nav__chevron" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 3.5 5 6.5 8 3.5"/></svg></button>
  <div class="cb-dropdown__panel" role="menu" aria-label="Acciones">
    <p class="cb-dropdown__label">Documento</p>
    <button class="cb-dropdown__item" type="button" role="menuitem" data-value="edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z"/></svg>Editar<span class="cb-dropdown__shortcut">E</span></button>
    <button class="cb-dropdown__item" type="button" role="menuitem" data-value="download"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 4v12m0 0-5-5m5 5 5-5M4 20h16"/></svg>Descargar<span class="cb-dropdown__shortcut">D</span></button>
    <hr class="cb-dropdown__divider">
    <button class="cb-dropdown__item cb-dropdown__item--danger" type="button" role="menuitem" data-value="delete"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg>Eliminar</button>
  </div>
</div>

Alineado a la derecha

HTML

<div class="cb-dropdown ml-auto self-start" data-cb-dropdown>
  <button class="cb-btn cb-btn--outline cb-btn--icon" type="button" aria-label="Más opciones" data-cb-dropdown-trigger><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg></button>
  <div class="cb-dropdown__panel cb-dropdown__panel--end" role="menu" aria-label="Opciones">
    <a class="cb-dropdown__item" href="#" role="menuitem">Perfil</a>
    <a class="cb-dropdown__item" href="#" role="menuitem">Configuración</a>
    <hr class="cb-dropdown__divider">
    <a class="cb-dropdown__item" href="#" role="menuitem">Cerrar sesión</a>
  </div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-dropdown`	Contenedor relativo.
`.cb-dropdown__panel`	Panel flotante. `--end` lo alinea a la derecha, `--up` lo abre hacia arriba, `--wide` lo ensancha.
`.cb-dropdown__item`	Elemento. `--rich` para número + título + descripción; `--danger` para acciones destructivas.
`.cb-dropdown__num`, `.cb-dropdown__title`, `.cb-dropdown__desc`	Partes del elemento enriquecido.
`.cb-dropdown__shortcut`	Atajo alineado a la derecha.
`.cb-dropdown__label`, `.cb-dropdown__divider`	Título de grupo y separador.

Atributos data-cb-*

Atributo	Descripción
`data-cb-dropdown`	Activa el componente.
`data-cb-dropdown-trigger`	Botón que abre (por defecto, el primer `button`).
`data-cb-dropdown-panel`	Panel (por defecto, `.cb-dropdown__panel`).
`data-cb-dropdown-hover`	También abre con hover.
`data-cb-dropdown-close`	Cualquier elemento dentro del panel que deba cerrarlo.

JavaScript

Evento	Cuándo se dispara
`cb:open` / `cb:close`	Al abrir o cerrar. `cb:open` se puede cancelar.
`cb:select`	Al elegir un `menuitem` (`detail.item`, `detail.value`).

Escuchar la selección:

document.querySelector('#acciones').addEventListener('cb:select', (event) => {
  console.log(event.detail.value);
});

Accesibilidad

El botón recibe aria-expanded, aria-controls y aria-haspopup="menu".
Esc cierra y devuelve el foco al botón; un clic fuera también cierra.
Usa role="menu" solo para acciones. Para enlaces de navegación deja el panel sin rol.