Cómo crear un Sidebar con Bootstrap

Un sidebar es un panel lateral que contiene enlaces a redes sociales, contenido relacionado o material que se vincula con el foco principal de esa página. En el diseño web, se utiliza principalmente para mejorar la usabilidad y la arquitectura de la información, facilitando el acceso a las diferentes secciones de un sitio o aplicación web.

Si bien el uso de este elemento ha disminuido con el paso del tiempo y las nuevas tendencias, sigue siendo una opción útil para varias situaciones y es importante comprender en qué casos conviene usarlo.

En este artículo, mostraré cómo crear un sidebar utilizando Bootstrap y también analizaré la diferencia entre un sidebar y una barra de navegación, así como el uso de la etiqueta <aside> en HTML5.

¿Qué es un sidebar?

El sidebar es un panel que, por lo general, se ubica de modo vertical. En su concepción clásica se lo posiciona del lado izquierdo de una página web. En este sentido vale decir que es un elemento semántico, con lo cual su posición y contenido puede variar.

Suele contener enlaces, menús o widgets interactivos. Su principal objetivo es mejorar la navegación del usuario proporcionando acceso rápido a varias secciones del sitio sin necesidad de desplazarse mucho.

¿Por qué usar un sidebar?

1. Ayuda a mejorar la experiencia del usuario: un sidebar organizado facilita la navegación y la accesibilidad del contenido relacionado.
2. Acceso rápido a contenidos clave: puede ofrecer acceso rápido a diferentes ítems del sitio sin tener que desplazarse por toda la página. Por ejemplo, se puede mostrar un Top 5 de notas o artículos.
3. Responsive design: a la hora de crear un sidebar, debemos trabajar para que pueda adaptarse a diferentes tamaños de pantalla. La finalidad es ofrecer una experiencia de usuario fluida tanto en desktop como en móviles. En este apartado, Bootstrap ofrece muchas ventajas.
4. Redes sociales: ubicar el acceso a las redes sociales en el sidebar puede resultar una manera de tener presente estos enlaces a primera vista.

Uso de la etiqueta <aside> en HTML5

La etiqueta <aside> se introdujo en HTML5 y está destinada a contener contenido relacionado tangencialmente con el contenido principal de una página. Esto hace que sea una etiqueta ideal para los sidebars, ya que suelen contener menús, enlaces adicionales, widgets o cualquier información que apoye el contenido principal.

¿Por qué usar <aside> en sidebars?

1. Semántica: mejora la accesibilidad del sitio para lectores de pantalla y motores de búsqueda, proporcionando un significado claro del contenido del sidebar.
2. SEO: al usar correctamente etiquetas semánticas como <aside>, ayuda a los motores de búsqueda a comprender mejor la estructura de tu página, lo que puede mejorar tu posicionamiento.

Ejemplo de uso de <aside> en un sidebar con Bootstrap

En este ejemplo, usamos la etiqueta <aside> para indicar que el sidebar es un contenido complementario al contenido principal de la página.

Bootstrap simplifica la creación de sidebars gracias a su sistema de grillas y clases predefinidas. A continuación, te muestro un ejemplo básico:

<aside id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
  <div class="position-sticky">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" href="#">Nota recomendada 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">>Nota recomendada 2</a>
      </li>
    </ul>
  </div>
</aside>

Para obtener los archivos base de Bootstrap o los enlaces a los CDN con la versión más reciente de esta biblioteca podemos consultar el sitio oficial de Bootstrap.

Sidebar vs barra de navegación

Es importante no confundir un sidebar con una barra de navegación (navbar). Si bien ambos se utilizan para ayudar a los usuarios a moverse por el contenido, tienen diferencias clave:

• Funcionalidad: la barra de navegación es adecuada para enlaces a las secciones principales (inicio, contacto, acerca de) o accesos a funciones primarias de la web. Un sidebar, en cambio, es ideal para la navegación contextual o secciones más específicas de una aplicación o sitio. El Sidebar podría omitirse y el sitio seguir teniendo sentido, mientras que la barra de navegación cumple un rol fundamental.
• Ubicación: la barra de navegación suele colocarse horizontalmente en la parte superior de la página, mientras que el sidebar está en el lateral (izquierda o derecha)..
• Adaptabilidad: en pantallas móviles, una barra de navegación, generalmente, se convierte en un menú desplegable. Por su parte, el sidebar puede ocultarse o mostrarse dinámicamente según la necesidad.

¿Cuándo utilizar un sidebar?

• Aplicaciones web: en dashboards o paneles de administración puede ser una opción complementaria.
• Sitios con mucho contenido: en blogs o sitios de noticias donde se requiere acceso a notas o contenidos relacionados.
• Comercio electrónico: en tiendas en línea se puede ofrecer artículos o categorías relacionadas.

¿Cuándo no es recomendable usar un sidebar?

• Sitios con contenido minimalista: si el contenido del sitio es reducido o no requiere múltiples niveles, un sidebar puede resultar redundante.
• Aplicaciones con interacciones simples: en apps donde la navegación principal puede manejarse fácilmente con una barra de navegación, un sidebar podría añadir complejidad innecesaria.

En conclusión

Un sidebar es una herramienta versátil para mejorar la navegación de sitios web y aplicaciones. Con Bootstrap, es fácil de implementar y adaptar a distintos dispositivos. Sin embargo, no siempre es recomendable su uso, sobre todo en sitios con contenido simple. La etiqueta <aside> en HTML5 mejora la semántica del sidebar y permite una mejor interpretación por parte de los buscadores.

Empleando Bootstrap para nuestros proyectos, la implementación de un Sidebar es simple y altamente personalizable. Encontraremos gran versatilidad para que se adapte tanto a dispositivos móviles como de escritorio. Además, gracias a las clases y componentes que ofrece Bootstrap (sumados a CSS y JavaScript), podremos ocultar y mostrar el sidebar dinámicamente, lo que aumenta la flexibilidad y el control en su uso.

Si te interesa saber más sobre Bootstrap déjame un comentario o escríbeme un mensaje.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.