Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de ruta de navegación

Última actualización:

Navegación de ruta de navegación CSS Tailwind solo con CSS con separadores personalizados y marcas de puntos de referencia accesibles. WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier proyecto Tailwind CSS v4.

Los componentes de ruta de navegación muestran la jerarquía de navegación y ayudan a los usuarios a comprender su ubicación dentro de un sitio web. Construidas con elementos de navegación HTML semánticos y puntos de referencia ARIA para accesibilidad, las rutas de navegación mejoran la usabilidad al permitir a los usuarios navegar rápidamente a las secciones principales. El sistema de ruta de navegación de Frutjam genera automáticamente separadores y admite separadores personalizados para un estilo flexible.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
breadcrumbBaseContenedor de navegación para ruta de navegación
breadcrumb-listModificadorLista ordenada de elementos de ruta de navegación
breadcrumb-itemModificadorElemento de lista individual en la ruta de navegación
breadcrumb-linkModificadorElemento de anclaje con estilo de enlace de ruta de navegación
breadcrumb-separatorModificadorElemento separador entre artículos
breadcrumb-currentModificadorMarca el elemento de la página actual (activo)

Uso básico

Si no se proporciona ningún separador, se muestra automáticamente una flecha entre los elementos de la ruta de navegación.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<nav className="breadcrumb" aria-label="Breadcrumb">
  <ol className="breadcrumb-list">
    <li className="breadcrumb-item">
      <a href="/" className="breadcrumb-link">Home</a>
    </li>
    <li className="breadcrumb-item">
      <span className="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

Separadores de pan rallado

Ruta de navegación con separador de texto

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current" aria-current="page">Badge</span>
    </li>
  </ol>
</nav>

Ruta de navegación con separador de iconos

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <span class="breadcrumb-current" aria-current="page">Button</span>
    </li>
  </ol>
</nav>

Accesibilidad de ruta de navegación

Para garantizar que las rutas de navegación sean accesibles para los lectores de pantalla:

  • Envuelva la estructura en un elemento <nav> con un aria-label="Breadcrumb".
  • El último elemento (página actual) debe usar aria-current="page" y preferiblemente ser un <span> en lugar de un enlace.
  • Los lectores de pantalla deben ignorar los separadores (a menudo manejados mediante CSS o aria-hidden="true" si se usa un elemento físico).

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Migaja de pan según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP