07/Estructura

Sidebar de documentación

Navegación lateral con grupos, enlace activo, selector de versión y tabla de contenidos que sigue el scroll.

Sidebar

HTML

<nav class="cb-sidenav max-w-[260px]" aria-label="Documentación">
  <div class="cb-sidenav__version">
    <div class="cb-select"><select class="cb-input cb-input--sm" aria-label="Versión"><option>v2.1 (actual)</option><option>v1.4</option></select></div>
  </div>
  <div class="cb-sidenav__group">
    <p class="cb-sidenav__title">Empezar</p>
    <ul class="cb-sidenav__list">
      <li><a class="cb-sidenav__link" href="#">Introducción</a></li>
      <li><a class="cb-sidenav__link" href="#" aria-current="page">Instalación</a></li>
      <li><a class="cb-sidenav__link" href="#">Temas <span class="cb-sidenav__badge">Nuevo</span></a></li>
    </ul>
  </div>
</nav>

Tabla de contenidos

Con data-cb-scrollspy el enlace de la sección visible se marca solo. Es la columna de la derecha en esta página.

HTML

<nav class="cb-toc" aria-label="En esta página" data-cb-scrollspy>
  <p class="cb-toc__title">En esta página</p>
  <a class="cb-toc__link" href="#sidebar">Sidebar</a>
  <a class="cb-toc__link" href="#tabla-de-contenidos">Tabla de contenidos</a>
</nav>

Clases y modificadores

Clase	Descripción
`.cb-sidenav`	Columna de grupos. `--sticky` la fija al hacer scroll.
`.cb-sidenav__version`	Fila del selector de versión.
`.cb-sidenav__group`, `.cb-sidenav__title`, `.cb-sidenav__list`	Grupo, título y lista.
`.cb-sidenav__link`	Enlace con línea izquierda; `aria-current="page"` lo marca.
`.cb-sidenav__badge`	Etiqueta pequeña en color de acento.
`.cb-toc`, `.cb-toc__link`	Tabla de contenidos de la página.

Atributos data-cb-*

Atributo	Descripción
`data-cb-scrollspy`	Marca el enlace cuya sección está en pantalla.
`data-cb-version-select`	Al cambiar el `select` navega a la URL del `value`.

JavaScript

Evento	Cuándo se dispara
`cb:change`	En el `nav` con scrollspy cuando cambia la sección activa (`detail.id`).

Accesibilidad

La página actual usa aria-current="page"; la sección activa usa aria-current="true".
El select de versión necesita una etiqueta, aunque sea cb-sr-only.