Componente de ruta de navegación

Última actualización: July 13, 2026

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
breadcrumb	Base	Contenedor de navegación para ruta de navegación
breadcrumb-list	Modificador	Lista ordenada de elementos de ruta de navegación
breadcrumb-item	Modificador	Elemento de lista individual en la ruta de navegación
breadcrumb-link	Modificador	Elemento de anclaje con estilo de enlace de ruta de navegación
breadcrumb-separator	Modificador	Elemento separador entre artículos
breadcrumb-current	Modificador	Marca 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.

<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>

<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>

Ver código

Separadores de pan rallado

Ruta de navegación con separador de texto

<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>

Ver código

Ruta de navegación con separador de iconos

<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>

Ver código

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

Componente de ruta de navegación

Uso básico

Separadores de pan rallado

Ruta de navegación con separador de texto

Ruta de navegación con separador de iconos

Accesibilidad de ruta de navegación

Relacionado

Found this useful?