Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de pão ralado

Última atualização:

Navegação de trilha CSS Tailwind somente CSS com separadores personalizados e marcação de pontos de referência acessíveis. WCAG AA, funciona com Django, HTMX, Laravel, React e qualquer projeto Tailwind CSS v4.

Os componentes da localização atual mostram a hierarquia de navegação e ajudam os usuários a entender sua localização em um site. Construído com elementos de navegação HTML semânticos e pontos de referência ARIA para acessibilidade, a localização atual melhora a usabilidade, permitindo que os usuários naveguem rapidamente para as seções principais. O sistema de localização atual Frutjam renderiza automaticamente separadores e oferece suporte a separadores personalizados para um estilo flexível.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
breadcrumbBaseContêiner de navegação para trilha de navegação
breadcrumb-listModificadorLista ordenada de itens de localização atual
breadcrumb-itemModificadorItem de lista individual na localização atual
breadcrumb-linkModificadorElemento âncora estilizado como um link de localização atual
breadcrumb-separatorModificadorElemento separador entre itens
breadcrumb-currentModificadorMarca o item da página atual (ativo)

Uso Básico

Se nenhum separador for fornecido, uma seta será mostrada automaticamente entre os itens de localização atual.

 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 pão ralado

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

Breadcrumb com separador de ícones

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>

Acessibilidade estrutural

Para garantir que a localização atual esteja acessível aos leitores de tela:

  • Envolva a estrutura em um elemento <nav> com um aria-label="Breadcrumb".
  • O último item (página atual) deve usar aria-current="page" e preferencialmente ser um <span> em vez de um link.
  • Os separadores devem ser ignorados pelos leitores de tela (geralmente tratados via CSS ou aria-hidden="true" se estiver usando um elemento físico).

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Pão ralado e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP