UIBarra de navegación
La barra de arriba de un sitio: marca, enlaces principales, un buscador y la cuenta, que se pliega en un botón en pantallas pequeñas.
Una barra de navegación contiene la navegación principal de un sitio. Muestra la marca, los sitios a los que más se va y las herramientas de la cuenta, y se pliega en un botón de menú cuando la pantalla es estrecha.
Cuándo usarlo
Úsalo
- De cinco a siete enlaces principales, con el actual marcado.
- La marca a la izquierda, las herramientas (buscador, cuenta) a la derecha.
- Meter los enlaces menos usados dentro de un desplegable.
- Dejar que se pliegue bajo el punto de corte que encaje con el número de enlaces.
No
- Llenarla con todas las páginas del sitio.
- Usar dos barras una encima de otra.
- Cambiar el orden de los enlaces entre páginas.
Anatomía
Una marca (navbar-brand), un botón para pantallas pequeñas (navbar-toggler), un área plegable (navbar-collapse) con los enlaces (navbar-nav, nav-link) y formularios o texto opcionales (navbar-text).
Variantes y estados
La barra de navegación de Moodle
La barra de Moodle es la que conoce todo usuario, y cada versión la dibuja a su manera: Moodle 5.3 con la píldora y el punto de su sistema de diseño, Moodle 4.x con el enlace subrayado. La barra de abajo es lo que renderiza Moodle en la versión elegida; un plugin no dibuja la suya.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
La barra de Bootstrap
Para una pantalla de un plugin que necesita una barra propia (una herramienta independiente, un panel), la barra de Bootstrap es el componente del que partir.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Búsqueda desde la barra
La lupa de una barra es un icono marcado, no una caja de texto: un campo dentro de la barra tiene que ser estrecho y compite con los enlaces. Al pulsarla, el icono abre debajo de la barra un componente de búsqueda: un campo con sitio para una consulta larga, filtros por tipo, resultados que dicen qué es cada uno (una pastilla con icono, un título, una línea de contexto y una insignia), el seleccionado resaltado y las teclas que lo manejan. El icono toma el tinte del color primario mientras el componente está abierto.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Marca × enlaces × herramientas | La marca a la izquierda, los enlaces principales a su lado, las herramientas (búsqueda, notificaciones, cuenta) a la derecha. |
| Enlaces × desplegable | Los enlaces menos usados van dentro de un desplegable («Más») para que la barra nunca se parta. |
| Clara × primaria | Una barra clara para pantallas de trabajo, una barra en el color primario para una herramienta con identidad propia. |
| Iconos × badges | Iconos de herramienta con un contador en la esquina (badge-float); la cuenta como iniciales o una foto. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| La barra de Moodle conserva su diseño en cada versión | El usuario debe encontrar la misma navegación en cada curso; el sistema de diseño la documenta, no la sustituye. |
| Los enlaces son píldoras con un tinte, el actual es más fuerte | Se ve dónde estás por el peso y el tinte, no solo por el color. |
| Un borde fino y esquinas redondeadas en la barra independiente | Separa la barra de la página sin una sombra pesada. |
Clases
| Clase | Qué hace |
|---|---|
navbar, navbar-expand-lg |
La barra, y el ancho desde el que se expande |
navbar-brand |
Marca |
navbar-nav, nav-link |
Los enlaces; active, disabled |
navbar-toggler |
El botón que abre el menú en pantallas pequeñas |
navbar-text |
Texto plano dentro de la barra |
nav-search-toggle |
La lupa marcada de una barra (Didactika) |
dd-search, dd-search-field, dd-search-filters, dd-search-results, dd-search-foot |
El componente de búsqueda que se abre bajo la barra (Didactika) |
bg-body-tertiary, data-bs-theme="dark"navbar-light bg-light, navbar-dark bg-primary |
Barra clara y oscura |
En esta versión
Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. La barra va en un container-fluid y la barra oscura se define con data-bs-theme="dark".
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. Las barras clara y oscura son navbar-light y navbar-dark, y el formulario de búsqueda es form-inline.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. Las barras clara y oscura son navbar-light y navbar-dark, y el formulario de búsqueda es form-inline.
Accesibilidad
- Envuélvela en un
nav(la barra ya lo es) y dale unaria-labelsi la página tiene más de una. - El botón lleva
aria-controls,aria-expandedyaria-label. - La página actual lleva
aria-current="page". - Todo es alcanzable con el teclado en el orden visual.