Navs, tabs y pills

Estructura básica de navegación con navs

Los navs representan el componente fundamental para crear elementos de navegación en Bootstrap. A diferencia de las listas comunes que hemos visto anteriormente, los navs están específicamente diseñados para funciones de navegación y proporcionan una base sólida sobre la cual construir diferentes tipos de menús y sistemas de navegación.

La estructura básica de un nav utiliza dos clases principales: .nav como contenedor y .nav-link para cada elemento individual de navegación. Esta combinación crea la fundación sobre la cual se pueden aplicar diferentes estilos y comportamientos.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#home">Inicio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#products">Productos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#about">Acerca de</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contacto</a>
  </li>
</ul>

Flexibilidad en la estructura HTML

Los navs de Bootstrap son flexibles en cuanto a la estructura HTML que pueden utilizar. Aunque el ejemplo anterior usa una lista <ul> con elementos <li>, también puedes crear navs directamente con elementos <nav> o <div>:

<!-- Usando nav con divs -->
<nav class="nav">
  <a class="nav-link" href="#section1">Sección 1</a>
  <a class="nav-link" href="#section2">Sección 2</a>
  <a class="nav-link" href="#section3">Sección 3</a>
  <a class="nav-link" href="#section4">Sección 4</a>
</nav>

Esta versatilidad permite adaptar la estructura HTML según las necesidades semánticas de cada proyecto. La estructura con listas es más apropiada cuando necesitas una navegación claramente definida como una lista de opciones, mientras que la estructura directa con enlaces es más simple para navegaciones básicas.

Elementos no enlazados

Los navs también pueden contener elementos que no son enlaces, como texto descriptivo o elementos informativos. En estos casos, utiliza la clase .nav-link en elementos <span> para mantener la consistencia visual:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#dashboard">Panel</a>
  </li>
  <li class="nav-item">
    <span class="nav-link">Configuración</span>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile">Perfil</a>
  </li>
</ul>

Navegación vertical

Por defecto, los navs se muestran horizontalmente gracias a que Bootstrap utiliza flexbox internamente. Para crear navegación vertical, puedes utilizar la clase .flex-column que ya conoces:

<nav class="nav flex-column">
  <a class="nav-link" href="#dashboard">Panel de control</a>
  <a class="nav-link" href="#orders">Pedidos</a>
  <a class="nav-link" href="#customers">Clientes</a>
  <a class="nav-link" href="#reports">Informes</a>
  <a class="nav-link" href="#settings">Configuración</a>
</nav>

Esta orientación vertical es especialmente útil para menús laterales, navegación en formularios largos, o sistemas de filtros donde quieres que las opciones se apilen verticalmente.

Casos de uso prácticos

Los navs básicos son ideales para diferentes escenarios comunes:

Menús de sección en páginas de contenido:

<nav class="nav">
  <a class="nav-link" href="#introduccion">Introducción</a>
  <a class="nav-link" href="#caracteristicas">Características</a>
  <a class="nav-link" href="#precios">Precios</a>
  <a class="nav-link" href="#testimonios">Testimonios</a>
</nav>

Filtros básicos para catálogos:

<nav class="nav flex-column">
  <a class="nav-link" href="#todos">Todos los productos</a>
  <a class="nav-link" href="#electronicos">Electrónicos</a>
  <a class="nav-link" href="#ropa">Ropa y accesorios</a>
  <a class="nav-link" href="#hogar">Hogar y jardín</a>
  <a class="nav-link" href="#deportes">Deportes</a>
</nav>

Navegación de categorías en un blog:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#tecnologia">Tecnología</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#diseno">Diseño</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#desarrollo">Desarrollo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#marketing">Marketing</a>
  </li>
</ul>

La simplicidad de esta estructura básica permite que los navs sean el punto de partida para construcciones más complejas. Al dominar esta estructura fundamental, tienes la base para crear cualquier tipo de navegación que posteriormente pueda ser estilizada con las variaciones que veremos en las siguientes secciones.

Tabs y pills como variaciones de estilo

Mientras que la estructura básica de los navs proporciona la funcionalidad de navegación, Bootstrap incluye dos variaciones visuales principales que transforman completamente la apariencia: tabs y pills. Estas variaciones mantienen la misma estructura HTML pero aplican estilos visuales distintos que se adaptan a diferentes contextos y necesidades de diseño.

Navegación con tabs

Los tabs crean una apariencia de pestañas tradicionales, similar a las que encontramos en interfaces de escritorio o navegadores web. Para aplicar este estilo, añade la clase .nav-tabs al contenedor .nav:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" href="#perfil">Perfil</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#configuracion">Configuración</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#notificaciones">Notificaciones</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#privacidad">Privacidad</a>
  </li>
</ul>

Las tabs crean una línea visual clara que simula carpetas o pestañas físicas, con bordes que conectan visualmente los elementos. Este estilo es especialmente efectivo cuando quieres que la navegación parezca una extensión natural del contenido que está debajo.

Ejemplo práctico para un panel de administración:

<nav class="nav nav-tabs">
  <a class="nav-link" href="#ventas">Ventas</a>
  <a class="nav-link" href="#inventario">Inventario</a>
  <a class="nav-link" href="#clientes">Clientes</a>
  <a class="nav-link" href="#reportes">Reportes</a>
</nav>

Navegación con pills

Los pills ofrecen una apariencia más moderna y redondeada, creando elementos que parecen cápsulas o botones suaves. Esta variación se aplica con la clase .nav-pills:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" href="#inicio">Inicio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#servicios">Servicios</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#portfolio">Portfolio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contacto">Contacto</a>
  </li>
</ul>

Las pills son ideales cuando quieres una navegación menos formal y más accesible visualmente. Su diseño redondeado las hace perfectas para interfaces modernas y aplicaciones web contemporáneas.

Ejemplo práctico para filtros de contenido:

<nav class="nav nav-pills">
  <a class="nav-link" href="#todos">Todos</a>
  <a class="nav-link" href="#populares">Populares</a>
  <a class="nav-link" href="#recientes">Recientes</a>
  <a class="nav-link" href="#favoritos">Favoritos</a>
</nav>

Pills verticales

Los pills funcionan excepcionalmente bien en orientación vertical, creando una navegación lateral elegante y moderna. Combina .nav-pills con .flex-column:

<nav class="nav nav-pills flex-column">
  <a class="nav-link" href="#dashboard">Panel principal</a>
  <a class="nav-link" href="#analytics">Analíticas</a>
  <a class="nav-link" href="#campaigns">Campañas</a>
  <a class="nav-link" href="#audience">Audiencia</a>
  <a class="nav-link" href="#settings">Configuración</a>
</nav>

Esta configuración vertical es especialmente útil para menús laterales en dashboards, paneles de administración, o cualquier interfaz donde necesites una navegación secundaria que no compita visualmente con el contenido principal.

Diferencias visuales clave

La elección entre tabs y pills depende del contexto y la sensación que quieras transmitir:

Tabs son ideales para:

• Interfaces que necesitan parecer profesionales y estructuradas
• Contenido que se organiza naturalmente en secciones claramente diferenciadas
• Aplicaciones de gestión, paneles administrativos, o formularios largos
• Cuando quieres que la navegación se integre visualmente con el contenido

Pills son perfectos para:

• Interfaces modernas y amigables
• Filtros y categorización de contenido
• Navegación secundaria o auxiliar
• Aplicaciones web contemporáneas donde la accesibilidad visual es prioritaria

Casos de uso específicos

Navegación de categorías en un e-commerce con tabs:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" href="#descripcion">Descripción</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#especificaciones">Especificaciones</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#reviews">Reviews</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#shipping">Envío</a>
  </li>
</ul>

Sistema de filtros para un blog con pills:

<div class="nav nav-pills">
  <a class="nav-link" href="#tecnologia">Tecnología</a>
  <a class="nav-link" href="#diseno">Diseño</a>
  <a class="nav-link" href="#marketing">Marketing</a>
  <a class="nav-link" href="#negocios">Negocios</a>
</div>

Menú lateral de aplicación con pills verticales:

<nav class="nav nav-pills flex-column">
  <a class="nav-link" href="#inbox">Bandeja de entrada</a>
  <a class="nav-link" href="#sent">Enviados</a>
  <a class="nav-link" href="#drafts">Borradores</a>
  <a class="nav-link" href="#archive">Archivo</a>
  <a class="nav-link" href="#trash">Papelera</a>
</nav>

Flexibilidad de estructura

Tanto tabs como pills mantienen la misma flexibilidad de estructura HTML que los navs básicos. Puedes usar listas estructuradas o elementos directos según tus necesidades:

<!-- Tabs con estructura simple -->
<nav class="nav nav-tabs">
  <a class="nav-link" href="#home">Inicio</a>
  <a class="nav-link" href="#profile">Perfil</a>
  <a class="nav-link" href="#contact">Contacto</a>
</nav>

<!-- Pills con estructura de lista -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link" href="#option1">Opción 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#option2">Opción 2</a>
  </li>
</ul>

Esta consistencia estructural significa que puedes cambiar fácilmente entre estilos simplemente modificando la clase del contenedor, lo que proporciona gran flexibilidad durante el desarrollo y permite experimentar con diferentes apariencias sin reestructurar el HTML.

Estados activos, deshabilitados y alineaciones

Los navs de Bootstrap incluyen un sistema de estados visuales que permite indicar el elemento actualmente seleccionado, deshabilitar opciones temporalmente, y controlar la alineación de toda la navegación. Estos estados y opciones de posicionamiento transforman navs básicos en sistemas de navegación más informativos y adaptables a diferentes layouts.

Estados activos

El estado activo indica visualmente cuál es el elemento de navegación actualmente seleccionado o la sección en la que se encuentra el usuario. Se aplica mediante la clase .active directamente al elemento .nav-link:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#dashboard">Panel</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#orders">Pedidos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#customers">Clientes</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#reports">Informes</a>
  </li>
</ul>

En tabs, el estado activo crea una pestaña claramente resaltada que parece conectar visualmente con el contenido inferior. En pills, el elemento activo adquiere el color primario de Bootstrap y un fondo sólido que lo destaca del resto:

<nav class="nav nav-pills">
  <a class="nav-link" href="#todos">Todos</a>
  <a class="nav-link active" href="#populares">Populares</a>
  <a class="nav-link" href="#recientes">Recientes</a>
  <a class="nav-link" href="#favoritos">Favoritos</a>
</nav>

Estados deshabilitados

Los elementos deshabilitados indican opciones que no están disponibles temporalmente o que el usuario no puede acceder según su contexto actual. Se implementa con la clase .disabled:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#profile">Perfil</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#settings">Configuración</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Estadísticas Pro</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#help">Ayuda</a>
  </li>
</ul>

Los elementos deshabilitados aparecen con opacidad reducida y pierden su funcionalidad de hover, indicando claramente que no son interactivos. Nota que cuando un elemento está deshabilitado, es común omitir el atributo href o usar href="#" para evitar navegación accidental.

Combinación de estados

Los estados pueden coexistir en el mismo nav para crear interfaces más informativas. Es común tener un elemento activo mientras otros están deshabilitados:

<nav class="nav nav-tabs">
  <a class="nav-link active" href="#step1">Información básica</a>
  <a class="nav-link" href="#step2">Detalles del pedido</a>
  <a class="nav-link disabled">Pago</a>
  <a class="nav-link disabled">Confirmación</a>
</nav>

Este patrón es especialmente útil en procesos paso a paso donde quieres mostrar el progreso del usuario y las etapas futuras que aún no están disponibles.

Alineación horizontal

Bootstrap proporciona utilidades de alineación que transforman la distribución de los elementos de navegación. La alineación por defecto sitúa los elementos al inicio (izquierda), pero puedes usar las clases de flexbox para diferentes distribuciones:

Centrado:

<ul class="nav nav-pills justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#inicio">Inicio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#servicios">Servicios</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contacto">Contacto</a>
  </li>
</ul>

Alineado a la derecha:

<nav class="nav nav-tabs justify-content-end">
  <a class="nav-link" href="#configuracion">Configuración</a>
  <a class="nav-link" href="#perfil">Perfil</a>
  <a class="nav-link active" href="#logout">Salir</a>
</nav>

Distribución uniforme:

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link" href="#home">Inicio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" href="#products">Productos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#about">Acerca de</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contacto</a>
  </li>
</ul>

La clase .nav-fill hace que los elementos se distribuyan uniformemente ocupando todo el ancho disponible, creando una apariencia más equilibrada en contenedores amplios.

Navegación vertical con estados

En orientación vertical, los estados y alineaciones cobran dimensiones diferentes. Los pills verticales con estados activos crean menús laterales elegantes:

<nav class="nav nav-pills flex-column">
  <a class="nav-link active" href="#dashboard">Panel de control</a>
  <a class="nav-link" href="#users">Gestión de usuarios</a>
  <a class="nav-link" href="#content">Gestión de contenido</a>
  <a class="nav-link disabled">Análisis avanzado</a>
  <a class="nav-link" href="#settings">Configuración</a>
</nav>

Casos de uso prácticos

Sistema de filtros con estado activo:

<div class="nav nav-pills justify-content-center mb-4">
  <a class="nav-link active" href="#todos">Todos los productos</a>
  <a class="nav-link" href="#electronicos">Electrónicos</a>
  <a class="nav-link" href="#ropa">Ropa</a>
  <a class="nav-link" href="#hogar">Hogar</a>
</div>

Navegación de proceso con etapas deshabilitadas:

<ul class="nav nav-tabs nav-fill">
  <li class="nav-item">
    <a class="nav-link" href="#cart">Carrito</a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" href="#shipping">Envío</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Pago</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Confirmación</a>
  </li>
</ul>

Menú de categorías centrado:

<nav class="nav nav-pills justify-content-center">
  <a class="nav-link" href="#tecnologia">Tecnología</a>
  <a class="nav-link active" href="#diseno">Diseño</a>
  <a class="nav-link" href="#desarrollo">Desarrollo</a>
  <a class="nav-link" href="#marketing">Marketing</a>
</nav>

Navegación de perfil con elementos deshabilitados

Un ejemplo práctico que combina múltiples conceptos es un menú de configuración de usuario donde ciertas opciones pueden no estar disponibles según el plan de suscripción:

<div class="nav nav-pills flex-column">
  <a class="nav-link active" href="#general">Configuración general</a>
  <a class="nav-link" href="#security">Seguridad</a>
  <a class="nav-link" href="#notifications">Notificaciones</a>
  <a class="nav-link disabled">Funciones premium</a>
  <a class="nav-link disabled">Integraciones avanzadas</a>
  <a class="nav-link" href="#billing">Facturación</a>
</div>

Consideraciones de usabilidad

Al implementar estados en navegación, es importante mantener la claridad visual:

• El elemento activo debe ser claramente distinguible del resto
• Los elementos deshabilitados deben mantener suficiente contraste para ser legibles pero aparecer claramente inactivos
• Las alineaciones deben servir al propósito funcional, no solo estético
• En navegación vertical, considera el espaciado entre elementos para mejorar la legibilidad

Los estados y alineaciones en navs proporcionan las herramientas necesarias para crear sistemas de navegación informativos que guían al usuario de manera clara y eficiente a través de diferentes secciones, procesos o categorías de contenido.