Estilos

Componentes

Formularios

Organismos

Desplegable de navegación

Este tipo de desplegables permite acceder a opciones de navegación y funcionalidades adicionales de manera organizada, desplegándolas de forma vertical u horizontal.

Uso

Cuándo usar

  • Utilizar los desplegables cuando se necesita navegar entre secciones, páginas o áreas de un sitio o aplicación.
  • Cuando hay varias opciones de navegación relacionadas que no necesitan mostrarse todas al mismo tiempo.
  • Cuando se requiere organizar jerárquicamente opciones de navegación.

Cuándo no usar

  • No utilizar un desplegable de navegación si el objetivo es seleccionar o filtrar información. Para los casos en los que se requiera filtrar y/o seleccionar información, utilizar el componenteDesplegables de selección.
  • No utilizar un desplegable si la mayor parte de su experiencia se basa en formularios. En ese caso, considere usar un Campo de Selección (select).
  • No usar los desplegables de navegación si se requiere búsqueda, multiselección o tags.

Tipos

El objetivo de los desplegables de navegación es reducir la carga cognitiva de la persona usuaria proporcionando un acceso rápido a las opciones más relevantes y revelando opciones más detalladas a modo de cascada cuando se requiera.

Desplegables en encabezado de página

Despliega opciones de navegación dentro de un encabezado. Puede contener opciones en un segundo nivel que aparezcan a modo de cascada. Las opciones pueden estar alineadas a la derecha o a la izquierda del botón disparador según el espacio disponible y el dispositivo.

Desplegables en encabezado de página

Desplegables en navegación horizontal

En este contexto el menú desplegable puede mostrar opciones con íconos y cascadas. Según el dispositivo la cascada será vertical u horizontal.

Desplegables en navegación horizontal

Disposiciones

En encabezado de página

Dentro de un encabezado de página las opciones desplegadas deben ocupar un ancho fijo de 4 columnas. En mobile, deben ocupar un ancho fijo de 2 columnas.

Disposición de desplegable de selecciónDisposición de desplegable de selección

En navegación horizontal

Dentro de la navegación horizontal los desplegables se agrupan de forma horizontal formando una fila. En desktop, se deben ubicar uno al lado del otro ocupando un máximo de 8 columnas. En mobile, se deben organizar de forma vertical uno debajo del otro.

Disposición de desplegable de selecciónDisposición de desplegable de selecciónDisposición de desplegable de selecciónDisposición de desplegable de selección

Contenido en esta página

Con icono

Opción de navegaciónOpción de navegaciónOpción de navegación

  <div class="dropdown">
    <button
      type="button"
      class="btn btn-dropdown btn-dropdown-border btn-lg"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
      <span
        class="material-symbols-rounded btn-dropdown-icon"
        aria-label="hidden"
      >
        expand_more
      </span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">
        <span class="item-text">Opción de navegación</span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text">Opción de navegación</span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text">Opción de navegación</span>
      </a>
    </div>
  </div>

addOpción de navegaciónarrow_forwardaddOpción de navegaciónarrow_forwardaddOpción de navegaciónarrow_forwardlogoutCerrar sesión

  <div class="dropdown">
    <button
      type="button"
      class="btn btn-dropdown btn-dropdown-border btn-lg"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      <span
        class="material-symbols-rounded o-icon"
        aria-label="hidden"
      >
        add
      </span>
      <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">
        <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
        <span class="item-text">Opción de navegación</span>
        <span class="material-symbols-rounded o-icon" aria-label="hidden">arrow_forward</span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
        <span class="item-text">Opción de navegación</span>
        <span class="material-symbols-rounded o-icon" aria-label="hidden">arrow_forward</span>
      </a>
      <a class="dropdown-item disabled" href="#">
        <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
        <span class="item-text">Opción de navegación</span>
        <span class="material-symbols-rounded o-icon" aria-label="hidden">arrow_forward</span>
      </a>
      <a class="dropdown-item item-danger" href="#">
        <span class="material-symbols-rounded o-icon" aria-hidden="true">logout</span>
        <span class="item-text">Cerrar sesión</span>
      </a>
    </div>
  </div>

addOpción de navegaciónOpción de navegaciónarrow_forwardCerrar sesiónlogout

  <div class="dropdown">
    <button
      type="button"
      class="btn btn-dropdown btn-dropdown-border btn-lg"
      data-bs-toggle="dropdown"
      aria-expanded="false"
      aria-label="Menu"
    >
      <span
        class="material-symbols-rounded o-icon"
        aria-label="hidden"
      >
        menu
      </span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">
        <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text text-end">
          Opción de navegación
        </span>
        <span class="material-symbols-rounded o-icon" aria-label="hidden">arrow_forward</span>
      </a>
      <a class="dropdown-item item-danger" href="#">
        <span class="item-text text-end">
          Cerrar sesión
        </span>
        <span
          class="material-symbols-rounded o-icon"
          aria-label="hidden"
        >
          logout
        </span>
      </a>
    </div>
  </div>

Disposición derecha

Opción de navegaciónOpción de navegaciónOpción de navegaciónCerrar sesiónlogout

  <div class="dropdown">
    <button
      type="button"
      class="btn btn-dropdown btn-dropdown-border btn-lg"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      <span
        class="material-symbols-rounded btn-dropdown-icon"
        aria-label="hidden"
      >
        expand_more
      </span>
      <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
    </button>
    <div class="dropdown-menu dropdown-menu-end">
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item item-danger" href="#">
        <span class="item-text">Cerrar sesión</span>
        <span
          class="material-symbols-rounded o-icon"
          aria-label="hidden"
        >
          logout
        </span>
      </a>
    </div>
  </div>

Con cascada

Opción de navegaciónOpción de navegaciónOpción de navegación
Opción de navegaciónOpción de navegaciónOpción de navegaciónlogoutCerrar sesión

  <div class="dropdown">
    <button
      type="button"
      class="btn btn-dropdown btn-dropdown-border btn-lg"
      data-bs-toggle="dropdown"
      aria-expanded="false"
      data-bs-auto-close="outside"
    >
      <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
      <span
        class="material-symbols-rounded btn-dropdown-icon"
        aria-label="hidden"
      >
        expand_more
      </span>
    </button>
    <div class="dropdown-menu">
      <div class="dropdown sub-dropdown">
        <button
          type="button"
          class="btn btn-dropdown"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
          <span class="btn-dropdown-text ellipsis-1">
            Opción en cascada
          </span>
          <span
            class="material-symbols-rounded btn-dropdown-icon"
            aria-label="hidden"
          >
            expand_more
          </span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">

            <span class="item-text">
              Opción de navegación
            </span>
          </a>
          <a class="dropdown-item" href="#">
            <span class="item-text">
              Opción de navegación
            </span>
          </a>
          <a class="dropdown-item" href="#">
            <span class="item-text">
              Opción de navegación
            </span>
          </a>
        </div>
      </div>
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item item-danger" href="#">
        <span class="material-symbols-rounded o-icon" aria-label="hidden">logout</span>
        <span class="item-text">Cerrar sesión</span>
      </a>
    </div>
  </div>

Opción de navegaciónOpción de navegaciónOpción de navegación
Opción de navegaciónOpción de navegaciónOpción de navegaciónCerrar sesiónlogout

  <div class="dropdown">
    <button
      type="button"
      class="btn btn-dropdown btn-dropdown-border btn-lg"
      data-bs-toggle="dropdown"
      aria-expanded="false"
      data-bs-auto-close="outside"
    >
      <span
        class="material-symbols-rounded btn-dropdown-icon"
        aria-label="hidden"
      >
        expand_more
      </span>
      <span class="btn-dropdown-text ellipsis-1">Desplegable</span>
    </button>
    <div class="dropdown-menu dropdown-menu-end">
      <div class="dropdown sub-dropdown">
        <button
          type="button"
          class="btn btn-dropdown"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <span
            class="material-symbols-rounded btn-dropdown-icon"
            aria-label="hidden"
          >
            expand_more
          </span>

          <span class="btn-dropdown-text ellipsis-1">
            Opción en cascada
          </span>
          <span class="material-symbols-rounded o-icon" aria-label="hidden">add</span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">
            <span class="item-text">
              Opción de navegación
            </span>
          </a>
          <a class="dropdown-item" href="#">
            <span class="item-text">
              Opción de navegación
            </span>
          </a>
          <a class="dropdown-item" href="#">
            <span class="item-text">
              Opción de navegación
            </span>
          </a>
        </div>
      </div>
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item" href="#">
        <span class="item-text">
          Opción de navegación
        </span>
      </a>
      <a class="dropdown-item item-danger" href="#">
        <span class="item-text">Cerrar sesión</span>
        <span
          class="material-symbols-rounded o-icon"
          aria-label="hidden"
        >
          logout
        </span>
      </a>
    </div>
  </div>


Variantes

Anatomía

Anatomia de desplegable de selección
ElementoCarácter
1. Campo de selecciónObligatorio, es el área donde aparecerá la opción seleccionada.
2. Icono izquierdo (Opcional)Opcional, se utiliza para facilitar la identificación del desplegable. Utilizar íconos únicamente en los elementos del primer nivel de navegación.
3. Texto del desplegableObligatorio, todas las desplegable de selección deben brindar un mensaje claro sobre el punto que se quiere remarcar.
4. Icono derecho (Expandir)Obligatorio. Se utiliza para indicar que el campo puede expandirse para mostrar las opciones.
5. BordeBorde visible a su alrededor otorgándole un aspecto más distintivo y resaltado dentro del diseño.

Estados

Predeterminado (default)

Estado predeterminado del campo de selección en una interfaz.

Estado predeterminado del desplegable de selección

Predeterminado (hover)

Cuando un usuario está sobre el elemento.

Estado predeterminado del desplegable de selección

En foco (focus)

Es un principio de accesibilidad que asegura que cualquier elemento interactivo en una interfaz sea claramente visible cuando recibe la atención del usuario, especialmente al ser navegado con el teclado. En Obelisco se utiliza un borde o anillo (focus ring) por fuera del componente en un color distintivo.

Estado en foco del desplegable de selección

Expandido

Cuando un usuario está seleccionando una opción.

Estado en foco del desplegable de selección

Contenido en esta página

Navegación por teclado

El componente de desplegable de selección está construido para ser accesible mediante navegación por teclado y reconocible por lectores de pantalla, comunicando su estado de forma clara.

TABENTERSPACESCAPE

Utilizando el tab la persona usuaria puede llegar hasta el campo de selección. Con la barra espaciadora (space), las flechas para arriba o abajo puede abrir el desplegable donde estarán las opciones a seleccionar. Las flechas, además, se usan para navegar a través de las opciones, las cuales pueden ser seleccionadas con la barra espaciadora o enter.

Navegacion alternativa del desplegable de selección

En el desplegable de navegación cuando seleccionamos la opción con barra espaciadora o enter nos redirecciona a la opción seleccionada en ese mismo acto.

Etiquetado descriptivo

Para el desplegable de navegación recomendamos utilizar aria-haspopup="menu", indica que elemento button abre un menú.

Recomendamos utilizar aria expanded con valor "false" cuando no se muestrea el menú y con el valor "true" cuando mostramos el menú.

<div class="dropdown">
 <button
   type="button" 
   class="btn btn-dropdown btn-dropdown-border btn-lg" 
   data-bs-toogle="dropdown"   aria-haspopup="menu" 
   aria-expanded="false" 
 >
  <span 
   class="btn-dropdown-text ellipsis-1"> Desplegable 
  <span>
  <span 
   class="material-symbols-rounded btn-dropdown-icon"
   aria-hidden="true"> expand_more
  <span>
 </button>

Para cumplir con buenas prácticas de accesibilidad (WCAG + WAI-ARIA), recomendamos:

  • Utilizar role="menu" para identificar el contenedor del desplegable cuando este agrupa acciones o enlaces de navegación.
  • Utilizar role="menuitem" en cada opción del menú para indicar que se trata de elementos interactivos pertenecientes a un menú.

Criterios WCAG aplicados

Success Criterion 1.1.1 Non-text Content (Level A)

Si el campo tiene un ícono decorativo, por ejemplo, un ícono de búsqueda, debe tener una alternativa textual o estar marcado como decorativo (aria-hidden="true" o role="presentation").

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 1.4.3 Contrast (Minimum) (Level AA)

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

Success Criterion 1.4.4 Resize Text (Level AA)

Excepto por los subtítulos e imágenes de texto, el texto puede redimensionarse hasta un 200 % sin tecnología de asistencia, sin pérdida de contenido ni funcionalidad.

Success Criterion 2.1.1 Keyboard (Level A)

Todas las funcionalidades del contenido se puede operar a través de una interfaz de teclado.

Success Criterion 2.1.2 No Keyboard Trap (Level A)

Si el foco del teclado puede moverse a un componente de la página utilizando una interfaz de teclado, también debe ser posible mover el foco fuera de ese componente usando únicamente la misma interfaz de teclado. Si se requiere algo más que las teclas de flecha, tabulador u otros métodos estándar para salir, se debe informar al usuario sobre el método necesario para mover el foco.

Success Criterion 2.4.7 Focus Visible (Level AA)

Cualquier interfaz de usuario operable por teclado tiene un modo de operación donde el indicador de enfoque del teclado es visible.

Success Criterion 4.1.2 Name, Role, Value (Level A)

Para todos los componentes de la interfaz de usuario (incluidos, entre otros: elementos de formulario, enlaces y componentes generados por scripts), el nombre y la función se pueden determinar mediante programación; los estados, propiedades y valores que puede establecer el usuario se pueden configurar mediante programación; y la notificación de cambios en estos elementos está disponible para los agentes de usuario, incluidas las tecnologías de asistencia.

Contenido en esta página

Navegación de pie de página