Offcanvas

Intermedio
Bootstrap
Bootstrap
Actualizado: 24/09/2025

Estructura básica de offcanvas

El offcanvas es un componente que permite crear paneles laterales deslizables que aparecen superpuestos al contenido principal de la página. Estos paneles se deslizan desde los bordes de la pantalla y son especialmente útiles para mostrar navegación adicional, filtros, configuraciones o información complementaria sin ocupar espacio permanente en el layout.

La estructura HTML de un offcanvas sigue un patrón bien definido que consta de tres elementos principales: el contenedor offcanvas, la cabecera y el cuerpo del panel.

Componentes fundamentales

La estructura básica requiere un elemento contenedor con la clase .offcanvas, que actúa como el panel deslizante principal:

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
  <!-- Contenido del offcanvas -->
</div>

Dentro de este contenedor, la cabecera del offcanvas se define con .offcanvas-header y típicamente incluye un título y un botón de cierre:

<div class="offcanvas-header">
  <h5 class="offcanvas-title" id="offcanvasExampleLabel">Menú lateral</h5>
  <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>

El cuerpo del offcanvas utiliza la clase .offcanvas-body y contiene el contenido principal del panel:

<div class="offcanvas-body">
  <p>Este es el contenido principal del panel offcanvas.</p>
</div>

Activación del componente

Para activar el offcanvas necesitas un elemento trigger (como un botón) con los atributos data-bs-toggle="offcanvas" y data-bs-target que apunte al ID del offcanvas:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Abrir panel lateral
</button>

Ejemplo completo funcional

Aquí tienes un ejemplo completo que muestra la estructura básica en funcionamiento:

<!-- Botón trigger -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#menuLateral">
  <i class="bi bi-list"></i> Menú
</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="menuLateral">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Navegación</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="nav nav-pills flex-column">
      <li class="nav-item">
        <a class="nav-link active" href="#">Inicio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Productos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contacto</a>
      </li>
    </ul>
  </div>
</div>

Atributos esenciales

Los atributos más importantes para el funcionamiento básico son:

  • tabindex="-1" en el offcanvas para mejorar la accesibilidad
  • data-bs-toggle="offcanvas" en el elemento trigger para activar el comportamiento
  • data-bs-target="#idOffcanvas" para vincular el trigger con el panel específico
  • data-bs-dismiss="offcanvas" en el botón de cierre para ocultar el panel

El offcanvas se comporta como un modal lateral que se superpone al contenido existente. Bootstrap maneja automáticamente la funcionalidad de mostrar/ocultar el panel, el fondo semitransparente y la navegación por teclado, sin necesidad de JavaScript adicional.

Contenido y direcciones de despliegue

Bootstrap permite que los paneles offcanvas aparezcan desde cualquiera de los cuatro bordes de la pantalla, ofreciendo flexibilidad total para adaptar la interfaz a diferentes necesidades de diseño y contextos de uso.

Direcciones de despliegue disponibles

La dirección de despliegue se controla mediante clases específicas que determinan desde qué borde aparecerá el panel:

Desde la izquierda (start):

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Menú principal</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <nav class="nav flex-column">
      <a class="nav-link" href="#">Inicio</a>
      <a class="nav-link" href="#">Productos</a>
      <a class="nav-link" href="#">Servicios</a>
    </nav>
  </div>
</div>

Desde la derecha (end):

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Configuración</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <div class="form-check form-switch mb-3">
      <input class="form-check-input" type="checkbox" id="darkMode">
      <label class="form-check-label" for="darkMode">Modo oscuro</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="notifications">
      <label class="form-check-label" for="notifications">Notificaciones</label>
    </div>
  </div>
</div>

Desde arriba (top):

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Anuncio importante</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <div class="alert alert-info mb-0">
      <strong>¡Nueva actualización disponible!</strong>
      Descubre las nuevas funcionalidades de nuestra plataforma.
    </div>
  </div>
</div>

Desde abajo (bottom):

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Filtros de búsqueda</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <div class="row g-3">
      <div class="col-6">
        <label class="form-label">Precio mínimo</label>
        <input type="number" class="form-control" placeholder="0">
      </div>
      <div class="col-6">
        <label class="form-label">Precio máximo</label>
        <input type="number" class="form-control" placeholder="1000">
      </div>
    </div>
  </div>
</div>

Estructuración del contenido

El contenido del offcanvas puede incluir cualquier elemento HTML que funcione dentro de un contenedor regular. Los componentes más comunes incluyen navegación, listas, formularios básicos y elementos informativos.

Navegación con badges:

<div class="offcanvas-body">
  <ul class="list-group list-group-flush">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Mensajes
      <span class="badge bg-primary rounded-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Notificaciones
      <span class="badge bg-danger rounded-pill">3</span>
    </li>
    <li class="list-group-item">Configuración</li>
  </ul>
</div>

Información de producto con imagen:

<div class="offcanvas-body">
  <div class="card border-0">
    <img src="producto.jpg" class="card-img-top rounded" alt="Producto">
    <div class="card-body px-0">
      <h6 class="card-title">Especificaciones técnicas</h6>
      <ul class="list-unstyled small">
        <li><strong>Material:</strong> Algodón 100%</li>
        <li><strong>Tallas:</strong> S, M, L, XL</li>
        <li><strong>Colores:</strong> 5 disponibles</li>
      </ul>
      <button class="btn btn-outline-primary btn-sm">Ver detalles completos</button>
    </div>
  </div>
</div>

Consideraciones de uso por dirección

Cada dirección de despliegue tiene características específicas que las hacen más adecuadas para ciertos tipos de contenido:

  • .offcanvas-start es ideal para menús de navegación principales, especialmente en dispositivos móviles
  • .offcanvas-end funciona bien para paneles de configuración, carritos de compra o información secundaria
  • .offcanvas-top es perfecto para anuncios, alertas importantes o contenido promocional
  • .offcanvas-bottom resulta útil para filtros, formularios de búsqueda o acciones contextuales

Contenido adaptativo según el contexto

El contenido puede adaptarse al propósito específico del offcanvas manteniendo la estructura básica:

Panel de filtros para móviles:

<div class="offcanvas offcanvas-start" tabindex="-1" id="filtrosMobile">
  <div class="offcanvas-header">
    <h6 class="offcanvas-title">Filtrar productos</h6>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <div class="mb-4">
      <h6 class="fw-bold">Categorías</h6>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="ropa">
        <label class="form-check-label" for="ropa">Ropa</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="zapatos">
        <label class="form-check-label" for="zapatos">Zapatos</label>
      </div>
    </div>
    <div class="d-grid">
      <button class="btn btn-primary" data-bs-dismiss="offcanvas">Aplicar filtros</button>
    </div>
  </div>
</div>

Los offcanvas se adaptan automáticamente al ancho disponible en dispositivos móviles y mantienen un ancho fijo en pantallas más grandes, proporcionando una experiencia consistente sin necesidad de configuración adicional.

Integración con navegación y botones

Los offcanvas alcanzan su máximo potencial cuando se integran de forma natural con los elementos de navegación y botones existentes, creando experiencias de usuario fluidas y coherentes que extienden la funcionalidad de los componentes básicos.

Integración con navbars responsivas

La combinación más común y efectiva es usar offcanvas como extensión de navbars para dispositivos móviles. Esto permite ocultar la navegación completa en pantallas pequeñas y mostrarla en un panel deslizante cuando sea necesario.

Navbar con offcanvas integrado:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    
    <!-- Botón para offcanvas en móviles -->
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- Navegación normal para desktop -->
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Productos</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contacto</a></li>
      </ul>
    </div>
  </div>
</nav>

<!-- Offcanvas para móviles -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvas">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Navegación</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="navbar-nav justify-content-end flex-grow-1">
      <li class="nav-item">
        <a class="nav-link active" href="#">Inicio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Productos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Servicios</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contacto</a>
      </li>
    </ul>
  </div>
</div>

Botones trigger personalizados

Los botones que activan el offcanvas pueden personalizarse completamente usando las clases de botones que ya conoces, combinándolas con iconos y texto descriptivo.

Botones con diferentes estilos:

<!-- Botón primario con icono -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#menuPrincipal">
  <i class="bi bi-list"></i> Menú
</button>

<!-- Botón outline con solo icono -->
<button class="btn btn-outline-secondary" data-bs-toggle="offcanvas" data-bs-target="#configuracion">
  <i class="bi bi-gear-fill"></i>
</button>

<!-- Botón pequeño para filtros -->
<button class="btn btn-sm btn-info" data-bs-toggle="offcanvas" data-bs-target="#filtros">
  <i class="bi bi-funnel"></i> Filtrar
</button>

<!-- Link como trigger -->
<a class="text-decoration-none" href="#" data-bs-toggle="offcanvas" data-bs-target="#ayuda">
  <i class="bi bi-question-circle"></i> ¿Necesitas ayuda?
</a>

Navegación con submenús en offcanvas

Dentro del offcanvas puedes crear estructuras de navegación más complejas usando los componentes de navegación que ya dominas, como navs con pills o listas agrupadas.

Navegación con categorías:

<div class="offcanvas offcanvas-start" tabindex="-1" id="navegacionCompleta">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Explorar</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Navegación principal -->
    <ul class="nav nav-pills flex-column mb-4">
      <li class="nav-item">
        <a class="nav-link active" href="#">
          <i class="bi bi-house-door me-2"></i>Inicio
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="bi bi-grid me-2"></i>Productos
        </a>
      </li>
    </ul>
    
    <!-- Sección secundaria -->
    <h6 class="text-muted text-uppercase fw-bold mb-2">Categorías</h6>
    <ul class="list-unstyled">
      <li><a href="#" class="text-decoration-none d-block py-2">Electrónicos</a></li>
      <li><a href="#" class="text-decoration-none d-block py-2">Ropa y accesorios</a></li>
      <li><a href="#" class="text-decoration-none d-block py-2">Hogar y jardín</a></li>
    </ul>
    
    <!-- Botones de acción -->
    <div class="mt-4">
      <button class="btn btn-outline-primary w-100 mb-2">Iniciar sesión</button>
      <button class="btn btn-primary w-100">Registrarse</button>
    </div>
  </div>
</div>

Múltiples triggers para el mismo offcanvas

Un mismo offcanvas puede activarse desde múltiples botones o elementos en diferentes partes de la página, proporcionando acceso consistente al mismo contenido.

<!-- Trigger desde el header -->
<button class="btn btn-sm btn-outline-light" data-bs-toggle="offcanvas" data-bs-target="#carrito">
  <i class="bi bi-cart3"></i> Carrito <span class="badge bg-danger">3</span>
</button>

<!-- Trigger desde un botón flotante -->
<div class="position-fixed bottom-0 end-0 p-3">
  <button class="btn btn-success rounded-circle" data-bs-toggle="offcanvas" data-bs-target="#carrito">
    <i class="bi bi-cart-plus"></i>
  </button>
</div>

<!-- Trigger desde un enlace en el contenido -->
<p>¿Listo para comprar? <a href="#" data-bs-toggle="offcanvas" data-bs-target="#carrito">Ver carrito</a></p>

<!-- El mismo offcanvas para todos los triggers -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="carrito">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Carrito de compras</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Contenido del carrito -->
    <div class="d-flex align-items-center mb-3">
      <img src="producto1.jpg" alt="Producto" class="me-3" style="width: 50px;">
      <div class="flex-grow-1">
        <h6 class="mb-0">Camiseta básica</h6>
        <small class="text-muted">$25.99</small>
      </div>
    </div>
  </div>
</div>

Integración con componentes de navegación existentes

Los offcanvas funcionan perfectamente como complemento de componentes de navegación más complejos, proporcionando funcionalidad adicional sin reemplazar la navegación principal.

Navbar con múltiples offcanvas especializados:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Tienda Online</a>
    
    <div class="d-flex">
      <!-- Botón de búsqueda -->
      <button class="btn btn-outline-secondary me-2" data-bs-toggle="offcanvas" data-bs-target="#busqueda">
        <i class="bi bi-search"></i>
      </button>
      
      <!-- Botón de filtros -->
      <button class="btn btn-outline-info me-2" data-bs-toggle="offcanvas" data-bs-target="#filtros">
        <i class="bi bi-funnel"></i>
      </button>
      
      <!-- Botón de perfil -->
      <button class="btn btn-outline-primary" data-bs-toggle="offcanvas" data-bs-target="#perfil">
        <i class="bi bi-person"></i>
      </button>
    </div>
  </div>
</nav>

Botones de acción dentro del offcanvas

Dentro del offcanvas puedes incluir botones de acción que interactúen con el propio panel, como botones para cerrarlo automáticamente tras realizar una acción.

<div class="offcanvas-body">
  <form>
    <div class="mb-3">
      <label class="form-label">Buscar productos</label>
      <input type="text" class="form-control" placeholder="¿Qué estás buscando?">
    </div>
    
    <div class="mb-3">
      <label class="form-label">Categoría</label>
      <select class="form-select">
        <option>Todas las categorías</option>
        <option>Electrónicos</option>
        <option>Ropa</option>
      </select>
    </div>
    
    <!-- Botones que cierran el offcanvas -->
    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary flex-fill" data-bs-dismiss="offcanvas">
        Buscar
      </button>
      <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">
        Cancelar
      </button>
    </div>
  </form>
</div>

Esta integración natural entre offcanvas, navegación y botones permite crear interfaces responsivas sofisticadas que mantienen la usabilidad tanto en dispositivos móviles como de escritorio, aprovechando al máximo el espacio disponible y proporcionando acceso intuitivo a las funcionalidades principales.

Fuentes y referencias

Documentación oficial y recursos externos para profundizar en Bootstrap

Documentación oficial de Bootstrap
Alan Sastre - Autor del tutorial

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

LinkedIn

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Bootstrap es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.

Más tutoriales de Bootstrap

Explora más contenido relacionado con Bootstrap y continúa aprendiendo con nuestros tutoriales gratuitos.

Ver más tutoriales de Bootstrap Explorar todas las tecnologías

Aprendizajes de esta lección

  • Comprender la estructura básica y los elementos esenciales de un offcanvas en Bootstrap.
  • Aprender a activar y controlar un offcanvas mediante triggers y atributos específicos.
  • Conocer las diferentes direcciones de despliegue y su aplicación según el contexto.
  • Integrar offcanvas con componentes de navegación y botones para mejorar la experiencia de usuario.
  • Diseñar contenido adaptativo y funcional dentro de paneles offcanvas para distintos propósitos.