Toolbar
Barra de acciones en línea para agrupar botones relacionados con navegación por teclado accesible.
1. Acciones básicas (ghost)
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Acciones del documento">
<button type="button" class="gn-button gn-button--ghost gn-button--md">Copiar</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md">Editar</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md">Eliminar</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});2. Variante mixta (ghost + secondary + primary)
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Acciones del registro">
<button type="button" class="gn-button gn-button--ghost gn-button--md">Duplicar</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md">Exportar</button>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<button type="button" class="gn-button gn-button--secondary gn-button--md">Cancelar</button>
<button type="button" class="gn-button gn-button--primary gn-button--md">Guardar</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});3. Con icono y texto (iconos del sistema)
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Acciones del archivo">
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M7.975 17.75H16.025V16.25H7.975V17.75ZM7.975 13.5H16.025V12H7.975V13.5ZM4 22V2H14.525L20 7.475V22H4ZM13.775 8.15V3.5H5.5V20.5H18.5V8.15H13.775Z" fill="currentColor"/>
</svg>
Copiar
</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M2 24V20.975H22V24H2ZM5.5 16.475H6.6L16.375 6.7L15.825 6.15L15.275 5.6L5.5 15.375V16.475ZM4 17.975V14.775L17.4 1.375L20.6 4.575L7.2 17.975H4ZM16.375 6.7L15.825 6.15L15.275 5.6L16.375 6.7Z" fill="currentColor"/>
</svg>
Editar
</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M5.025 21V5.25H4V3.75H8.7V3H15.3V3.75H20V5.25H18.975V21H5.025ZM6.525 19.5H17.475V5.25H6.525V19.5ZM9.175 17.35H10.675V7.375H9.175V17.35ZM13.325 17.35H14.825V7.375H13.325V17.35Z" fill="currentColor"/>
</svg>
Eliminar
</button>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M16.45 7.8V4.5H7.55V7.8H6.05V3H17.95V7.8H16.45ZM18.475 11.675C18.675 11.675 18.85 11.6 19 11.45C19.15 11.3 19.225 11.125 19.225 10.925C19.225 10.725 19.15 10.55 19 10.4C18.85 10.25 18.675 10.175 18.475 10.175C18.275 10.175 18.1 10.25 17.95 10.4C17.8 10.55 17.725 10.725 17.725 10.925C17.725 11.125 17.8 11.3 17.95 11.45C18.1 11.6 18.275 11.675 18.475 11.675ZM16.45 19.5V14.7H7.55V19.5H16.45ZM17.95 21H6.05V16.6H2V7.8H22V16.6H17.95V21ZM20.5 15.1V9.3H3.5V15.1H6.05V13.2H17.95V15.1H20.5Z" fill="currentColor"/>
</svg>
Imprimir
</button>
<button type="button" class="gn-button gn-button--primary gn-button--md gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M7.975 17.75H16.025V16.25H7.975V17.75ZM7.975 13.5H16.025V12H7.975V13.5ZM4 22V2H14.525L20 7.475V22H4ZM13.775 8.15H18.5L13.775 3.5V8.15Z" fill="currentColor"/>
</svg>
Guardar
</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});4. Solo iconos (icon-only)
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Acciones del documento">
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-only" aria-label="Editar">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M2 24V20.975H22V24H2ZM5.5 16.475H6.6L16.375 6.7L15.825 6.15L15.275 5.6L5.5 15.375V16.475ZM4 17.975V14.775L17.4 1.375L20.6 4.575L7.2 17.975H4ZM16.375 6.7L15.825 6.15L15.275 5.6L16.375 6.7Z" fill="currentColor"/>
</svg>
</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-only" aria-label="Imprimir">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M16.45 7.8V4.5H7.55V7.8H6.05V3H17.95V7.8H16.45ZM18.475 11.675C18.675 11.675 18.85 11.6 19 11.45C19.15 11.3 19.225 11.125 19.225 10.925C19.225 10.725 19.15 10.55 19 10.4C18.85 10.25 18.675 10.175 18.475 10.175C18.275 10.175 18.1 10.25 17.95 10.4C17.8 10.55 17.725 10.725 17.725 10.925C17.725 11.125 17.8 11.3 17.95 11.45C18.1 11.6 18.275 11.675 18.475 11.675ZM16.45 19.5V14.7H7.55V19.5H16.45ZM17.95 21H6.05V16.6H2V7.8H22V16.6H17.95V21ZM20.5 15.1V9.3H3.5V15.1H6.05V13.2H17.95V15.1H20.5Z" fill="currentColor"/>
</svg>
</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-only" aria-label="Ver documento">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M5.625 22C4.89583 22 4.27608 21.7447 3.76575 21.2342C3.25525 20.7239 3 20.1042 3 19.375V16H6V2H21V19.375C21 20.1042 20.7449 20.7239 20.2345 21.2342C19.724 21.7447 19.1042 22 18.375 22H5.625ZM18.3727 20.5C18.6909 20.5 18.9583 20.3922 19.175 20.1765C19.3916 19.9608 19.5 19.6936 19.5 19.375V3.5H7.5V16H17.25V19.375C17.25 19.6936 17.3576 19.9608 17.5728 20.1765C17.7879 20.3922 18.0546 20.5 18.3727 20.5ZM9 8V6.5H18V8H9ZM9 11V9.5H18V11H9ZM5.6 20.5H15.75V17.5H4.5V19.375C4.5 19.6936 4.60833 19.9608 4.825 20.1765C5.04165 20.3922 5.3 20.5 5.6 20.5ZM5.6 20.5H4.5H15.75H5.6Z" fill="currentColor"/>
</svg>
</button>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-only" aria-label="Eliminar">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M5.025 21V5.25H4V3.75H8.7V3H15.3V3.75H20V5.25H18.975V21H5.025ZM6.525 19.5H17.475V5.25H6.525V19.5ZM9.175 17.35H10.675V7.375H9.175V17.35ZM13.325 17.35H14.825V7.375H13.325V17.35Z" fill="currentColor"/>
</svg>
</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});5. Con botón deshabilitado
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Acciones del documento (con elemento deshabilitado)">
<button type="button" class="gn-button gn-button--ghost gn-button--md">Copiar</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md" disabled>Editar</button>
<button type="button" class="gn-button gn-button--secondary gn-button--md">Cancelar</button>
<button type="button" class="gn-button gn-button--primary gn-button--md">Guardar</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});6. Tamaño SM
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Acciones compactas">
<button type="button" class="gn-button gn-button--ghost gn-button--sm gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M2 24V20.975H22V24H2ZM5.5 16.475H6.6L16.375 6.7L15.825 6.15L15.275 5.6L5.5 15.375V16.475ZM4 17.975V14.775L17.4 1.375L20.6 4.575L7.2 17.975H4ZM16.375 6.7L15.825 6.15L15.275 5.6L16.375 6.7Z" fill="currentColor"/>
</svg>
Editar
</button>
<button type="button" class="gn-button gn-button--ghost gn-button--sm gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M5.025 21V5.25H4V3.75H8.7V3H15.3V3.75H20V5.25H18.975V21H5.025ZM6.525 19.5H17.475V5.25H6.525V19.5ZM9.175 17.35H10.675V7.375H9.175V17.35ZM13.325 17.35H14.825V7.375H13.325V17.35Z" fill="currentColor"/>
</svg>
Eliminar
</button>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<button type="button" class="gn-button gn-button--secondary gn-button--sm">Cancelar</button>
<button type="button" class="gn-button gn-button--primary gn-button--sm gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M7.975 17.75H16.025V16.25H7.975V17.75ZM7.975 13.5H16.025V12H7.975V13.5ZM4 22V2H14.525L20 7.475V22H4ZM13.775 8.15H18.5L13.775 3.5V8.15Z" fill="currentColor"/>
</svg>
Guardar
</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});7. Con aria-labelledby (título visible)
Acciones del documento
Mostrar HTML
<div>
<h2 id="toolbar-doc-label" style="margin: 0 0 12px; font-size: var(--gn-text-p-sm);">Acciones del documento</h2>
<div class="gn-toolbar" role="toolbar" aria-labelledby="toolbar-doc-label">
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M7.975 17.75H16.025V16.25H7.975V17.75ZM7.975 13.5H16.025V12H7.975V13.5ZM4 22V2H14.525L20 7.475V22H4ZM13.775 8.15V3.5H5.5V20.5H18.5V8.15H13.775Z" fill="currentColor"/>
</svg>
Exportar
</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M16.45 7.8V4.5H7.55V7.8H6.05V3H17.95V7.8H16.45ZM18.475 11.675C18.675 11.675 18.85 11.6 19 11.45C19.15 11.3 19.225 11.125 19.225 10.925C19.225 10.725 19.15 10.55 19 10.4C18.85 10.25 18.675 10.175 18.475 10.175C18.275 10.175 18.1 10.25 17.95 10.4C17.8 10.55 17.725 10.725 17.725 10.925C17.725 11.125 17.8 11.3 17.95 11.45C18.1 11.6 18.275 11.675 18.475 11.675ZM16.45 19.5V14.7H7.55V19.5H16.45ZM17.95 21H6.05V16.6H2V7.8H22V16.6H17.95V21ZM20.5 15.1V9.3H3.5V15.1H6.05V13.2H17.95V15.1H20.5Z" fill="currentColor"/>
</svg>
Imprimir
</button>
<button type="button" class="gn-button gn-button--primary gn-button--md gn-button--icon-left">
<svg class="gn-button__icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none">
<path d="M7.975 17.75H16.025V16.25H7.975V17.75ZM7.975 13.5H16.025V12H7.975V13.5ZM4 22V2H14.525L20 7.475V22H4ZM13.775 8.15H18.5L13.775 3.5V8.15Z" fill="currentColor"/>
</svg>
Guardar
</button>
</div>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});8. Con dropdown de acciones (Más opciones)
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Acciones del documento">
<button type="button" class="gn-button gn-button--ghost gn-button--md">Editar</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md">Imprimir</button>
<div class="gn-dropdown-menu">
<button type="button" class="gn-dropdown-menu__trigger gn-dropdown-menu__trigger--ghost" aria-haspopup="menu" aria-expanded="false" id="toolbar-ex8-more">
<span class="gn-dropdown-menu__trigger-text">Más opciones</span>
<svg focusable="false" class="gn-dropdown-menu__trigger-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18 9.40039L12 15.4004L6 9.40039L7.0752 8.3252L12 13.25L16.9248 8.3252L18 9.40039Z" fill="currentColor"/>
</svg>
</button>
<div class="gn-dropdown-menu__panel" role="menu" aria-labelledby="toolbar-ex8-more">
<ul class="gn-dropdown-menu__list" role="none">
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Duplicar</button>
</li>
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Archivar</button>
</li>
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Compartir</button>
</li>
</ul>
</div>
</div>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<button type="button" class="gn-button gn-button--primary gn-button--md">Guardar</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});9. Acciones secundarias en dropdown (icon-only "···")
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Acciones del registro">
<button type="button" class="gn-button gn-button--secondary gn-button--md">Cancelar</button>
<button type="button" class="gn-button gn-button--primary gn-button--md">Guardar</button>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<div class="gn-dropdown-menu">
<button type="button" class="gn-dropdown-menu__trigger gn-dropdown-menu__trigger--ghost gn-dropdown-menu__trigger--icon-only" aria-haspopup="menu" aria-expanded="false" id="toolbar-ex9-sec" aria-label="Acciones secundarias">
<svg focusable="false" class="gn-dropdown-menu__trigger-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<circle cx="12" cy="5" r="2" fill="currentColor"/>
<circle cx="12" cy="12" r="2" fill="currentColor"/>
<circle cx="12" cy="19" r="2" fill="currentColor"/>
</svg>
</button>
<div class="gn-dropdown-menu__panel" role="menu" aria-labelledby="toolbar-ex9-sec">
<ul class="gn-dropdown-menu__list" role="none">
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Exportar</button>
</li>
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Duplicar</button>
</li>
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Archivar</button>
</li>
</ul>
</div>
</div>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});10. Con dropdown de selección (vista y ordenación)
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Controles de visualización">
<div class="gn-dropdown-menu gn-dropdown-menu--selector">
<button type="button" class="gn-dropdown-menu__trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="toolbar-ex10-view-lb" id="toolbar-ex10-view">
<span class="gn-dropdown-menu__trigger-text">Vista tabla</span>
<svg focusable="false" class="gn-dropdown-menu__trigger-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18 9.40039L12 15.4004L6 9.40039L7.0752 8.3252L12 13.25L16.9248 8.3252L18 9.40039Z" fill="currentColor"/>
</svg>
</button>
<ul id="toolbar-ex10-view-lb" class="gn-dropdown-menu__panel" role="listbox" aria-labelledby="toolbar-ex10-view">
<li class="gn-dropdown-menu__option" role="option" aria-selected="true" tabindex="0">Vista tabla</li>
<li class="gn-dropdown-menu__option" role="option" aria-selected="false" tabindex="-1">Vista lista</li>
<li class="gn-dropdown-menu__option" role="option" aria-selected="false" tabindex="-1">Vista tarjetas</li>
</ul>
</div>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<div class="gn-dropdown-menu gn-dropdown-menu--filters">
<button type="button" class="gn-dropdown-menu__trigger gn-dropdown-menu__trigger--ghost" aria-haspopup="true" aria-expanded="false" id="toolbar-ex10-sort">
<span class="gn-dropdown-menu__trigger-text">Ordenar por</span>
<svg focusable="false" class="gn-dropdown-menu__trigger-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18 9.40039L12 15.4004L6 9.40039L7.0752 8.3252L12 13.25L16.9248 8.3252L18 9.40039Z" fill="currentColor"/>
</svg>
</button>
<div class="gn-dropdown-menu__panel" role="group" aria-label="Opciones de ordenación">
<ul class="gn-dropdown-menu__list">
<li class="gn-dropdown-menu__item">
<button type="button" class="gn-dropdown-menu__filter-option gn-dropdown-menu__filter-option--checked" aria-pressed="true">Nombre</button>
</li>
<li class="gn-dropdown-menu__item">
<button type="button" class="gn-dropdown-menu__filter-option" aria-pressed="false">Fecha</button>
</li>
<li class="gn-dropdown-menu__item">
<button type="button" class="gn-dropdown-menu__filter-option" aria-pressed="false">Estado</button>
</li>
</ul>
</div>
</div>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<button type="button" class="gn-button gn-button--primary gn-button--md">Nueva entrada</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});11. Completa: grupos de botones, dropdown de acciones y selector
Mostrar HTML
<div class="gn-toolbar" role="toolbar" aria-label="Barra de herramientas principal">
<button type="button" class="gn-button gn-button--ghost gn-button--md">Copiar</button>
<button type="button" class="gn-button gn-button--ghost gn-button--md">Editar</button>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<div class="gn-dropdown-menu gn-dropdown-menu--selector">
<button type="button" class="gn-dropdown-menu__trigger" aria-haspopup="listbox" aria-expanded="false" aria-controls="toolbar-ex11-view-lb" id="toolbar-ex11-view">
<span class="gn-dropdown-menu__trigger-text">Vista tabla</span>
<svg focusable="false" class="gn-dropdown-menu__trigger-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18 9.40039L12 15.4004L6 9.40039L7.0752 8.3252L12 13.25L16.9248 8.3252L18 9.40039Z" fill="currentColor"/>
</svg>
</button>
<ul id="toolbar-ex11-view-lb" class="gn-dropdown-menu__panel" role="listbox" aria-labelledby="toolbar-ex11-view">
<li class="gn-dropdown-menu__option" role="option" aria-selected="true" tabindex="0">Vista tabla</li>
<li class="gn-dropdown-menu__option" role="option" aria-selected="false" tabindex="-1">Vista lista</li>
</ul>
</div>
<div class="gn-dropdown-menu">
<button type="button" class="gn-dropdown-menu__trigger gn-dropdown-menu__trigger--ghost" aria-haspopup="menu" aria-expanded="false" id="toolbar-ex11-more">
<span class="gn-dropdown-menu__trigger-text">Más opciones</span>
<svg focusable="false" class="gn-dropdown-menu__trigger-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18 9.40039L12 15.4004L6 9.40039L7.0752 8.3252L12 13.25L16.9248 8.3252L18 9.40039Z" fill="currentColor"/>
</svg>
</button>
<div class="gn-dropdown-menu__panel" role="menu" aria-labelledby="toolbar-ex11-more">
<ul class="gn-dropdown-menu__list" role="none">
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Exportar</button>
</li>
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Imprimir</button>
</li>
<li class="gn-dropdown-menu__item" role="none">
<button type="button" class="gn-dropdown-menu__action" role="menuitem">Archivar</button>
</li>
</ul>
</div>
</div>
<span class="gn-toolbar__divider" aria-hidden="true"></span>
<button type="button" class="gn-button gn-button--secondary gn-button--md">Cancelar</button>
<button type="button" class="gn-button gn-button--primary gn-button--md">Guardar</button>
</div>Mostrar JS
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});Un gn-toolbar agrupa controles de acción relacionados en una sola fila. A diferencia de un grupo de botones sueltos, el toolbar implementa navegación con flechas para que el conjunto sea una única parada de tabulación.
Además de botones, la toolbar puede contener elementos gn-dropdown-menu del sistema para agrupar acciones secundarias o controles de selección. No se crean clases nuevas: se reutiliza el componente dropdown existente directamente.
Cuándo usar toolbar
Usar cuando hay dos o más acciones relacionadas en línea que comparten un contexto claro: acciones de un documento, controles de un registro en tabla, opciones de edición de contenido. Ejemplos: Copiar / Editar / Eliminar, o Cancelar / Guardar.
No usar toolbar para navegación de páginas (usar gn-navmenu).
Diferencia con button-group
gn-button-group une visualmente botones relacionados que actúan como una sola unidad semántica (como un toggle de selección). gn-toolbar agrupa acciones independientes que no forman una unidad visual fusionada.
Dropdown dentro de toolbar
La toolbar acepta directamente elementos gn-dropdown-menu como items. No se añade ninguna clase extra: el componente gn-dropdown-menu tiene display: inline-flex y position: relative, por lo que encaja de forma nativa en el flex container de la toolbar y su panel se posiciona correctamente.
Tipos de dropdown en toolbar
Dropdown de acciones (role="menu"): agrupa acciones secundarias bajo "Más opciones" o un icono de tres puntos. Usar aria-haspopup="menu" en el trigger y role="menu" en el panel.
Dropdown de selección (gn-dropdown-menu--selector, role="listbox"): para controles de un solo valor como vista, idioma u ordenación exclusiva. Usar aria-haspopup="listbox" en el trigger.
Dropdown de filtros (gn-dropdown-menu--filters): para selección múltiple como filtros rápidos u opciones de ordenación. Usar aria-haspopup="true" en el trigger y role="group" en el panel.
Cuándo usar dropdown en toolbar
Usar cuando:
- hay acciones secundarias que no justifican un botón siempre visible;
- hay muchas acciones y se necesita reducir el ruido visual;
- las opciones están relacionadas entre sí (exportar, compartir, archivar);
- hay acciones poco frecuentes;
- hay controles de vista, ordenación o exportación.
Cuándo no usar dropdown en toolbar
No usar cuando:
- la acción es principal y debe estar siempre visible;
- solo hay una acción secundaria (usar botón directo);
- ocultar la acción perjudica la comprensión o la eficiencia del usuario;
- el dropdown mezclaría acciones destructivas con acciones normales sin separación visual;
- el contenido del dropdown no es realmente una lista de acciones u opciones.
Accesibilidad
El elemento contenedor usa role="toolbar" con un nombre accesible obligatorio: aria-label si no hay título visible, o aria-labelledby apuntando al id de un título visible.
Comportamiento de teclado en la toolbar:
Tabentra al toolbar y, al salir, mueve el foco fuera del toolbar completo.ArrowRight(oArrowDownen variante vertical) mueve el foco al siguiente control.ArrowLeft(oArrowUpen variante vertical) mueve el foco al control anterior.Homemueve el foco al primer control.Endmueve el foco al último control.EnterySpaceactivan el botón enfocado con su comportamiento nativo.
Los botones con atributo disabled quedan excluidos de la navegación por flechas. Si se necesita que un botón esté en el orden de foco pero no sea accionable, usar aria-disabled="true" en lugar de disabled.
Teclado cuando hay dropdown dentro de la toolbar
El trigger del dropdown forma parte del roving tabindex de la toolbar. Cuando el trigger tiene el foco:
ArrowRight/ArrowLeftnavega entre controles de la toolbar con normalidad.ArrowDownabre el dropdown (comportamiento nativo del componente dropdown).Escapecierra el dropdown si está abierto y devuelve el foco al trigger.
Los items del panel dropdown quedan fuera del roving tabindex de la toolbar: el dropdown gestiona su propio foco interno mientras está abierto.
No mezclar semántica de menú (role="menu", role="menuitem") con semántica de listbox. Usar cada variante del componente dropdown según su propósito:
- Acciones →
role="menu"+role="menuitem"+aria-haspopup="menu" - Selección de un valor →
role="listbox"+role="option"+aria-haspopup="listbox" - Filtros múltiples →
role="group"+aria-pressed+aria-haspopup="true"
Separador visual
El elemento <span class="gn-toolbar__divider" aria-hidden="true"> separa grupos de acciones visualmente sin efecto en la accesibilidad. Siempre incluir aria-hidden="true".
Responsive
La toolbar tiene flex-wrap: wrap por defecto, por lo que los items hacen wrap a una segunda línea cuando no hay espacio suficiente. Para reducir el número de items visibles en espacio reducido, agrupar las acciones secundarias en un dropdown "Más opciones". No existe una variante automática de colapso; ese comportamiento requiere lógica de aplicación.
Variante vertical
Añadir la clase gn-toolbar--vertical para orientar el toolbar en columna. La navegación cambia a ArrowDown / ArrowUp.
Inicialización
Cuando la toolbar contiene dropdowns, inicializar ambos componentes:
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
window.GNDS.initDropdownMenus();
});Cuando la toolbar solo contiene botones, basta con:
document.addEventListener('DOMContentLoaded', () => {
window.GNDS.initToolbars();
});