Componentes de Bootstrap

Panel lateral5.3+

Un panel que entra desde el borde de la pantalla para navegación, filtros o detalles.

Un panel lateral aparta el contenido secundario hasta que el usuario lo pide: un índice del curso, un panel de filtros, un carrito. Cubre parte de la página y tiene un fondo atenuado.

Cuándo usarlo

Úsalo

Usarlo para contenido secundario o navegación en pantallas pequeñas.
Darle un título y un botón de cierre.
Empezar por la izquierda para navegación y por la derecha para detalles.

No

Usarlo para una decisión; usa un diálogo modal.
Abrirlo solo.
Meter en él el contenido principal de la página.

Anatomía

Un panel (offcanvas, con un lado) con un encabezado (offcanvas-header, offcanvas-title, cierre) y un cuerpo (offcanvas-body), sobre una página atenuada.

Variantes y estados

Panel lateral

Unit 1 · Numbers Unit 2 · Functions Unit 3 · Equations

Combinaciones

Combinación	Para qué usarla
Inicio × navegación	Desde la izquierda para un índice de curso o un menú.
Final × detalles	Desde la derecha para filtros o los detalles de una fila.
Panel lateral × pantallas pequeñas	El panel que es una barra lateral en escritorio pasa a ser un panel lateral desplegable en móvil.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
El panel es una superficie con una sombra suave y profunda	Flota sobre la página y no parece pegado al borde.
La lista de dentro toma los mismos estados que toda lista	El usuario ya sabe cómo responden los elementos.

Clases

Clase	Qué hace
`offcanvas`, `offcanvas-start`, `offcanvas-end`	El panel y su lado
`offcanvas-header`, `offcanvas-title`, `offcanvas-body`	Sus partes
`btn-close`	Botón de cierre

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.

Accesibilidad

El foco entra en el panel y vuelve al disparador al cerrarse.
Escape lo cierra.
aria-labelledby apunta al título.