Componentes / Breadcrumbs

Breadcrumbs

Breadcrumbs brutalistas com borda solida, 6 tipos de separador, variantes de cor, tamanhos e suporte a icones e dropdown.

Breadcrumb Basico

Preview
HTML 
<nav class="canta-breadcrumb" aria-label="Breadcrumb">
  <ol class="canta-breadcrumb__list">
    <li class="canta-breadcrumb__item">
      <a href="#" class="canta-breadcrumb__link">Home</a>
      <span class="canta-breadcrumb__separator"></span>
    </li>
    <li class="canta-breadcrumb__item">
      <a href="#" class="canta-breadcrumb__link">Produtos</a>
      <span class="canta-breadcrumb__separator"></span>
    </li>
    <li class="canta-breadcrumb__item">
      <span class="canta-breadcrumb__link">Detalhe</span>
    </li>
  </ol>
</nav>

Com Icones

Links com icone
HTML 
<a href="#" class="canta-breadcrumb__link canta-breadcrumb__link--icon">
  <span class="canta-breadcrumb__icon">
    <span class="material-symbols-rounded">home</span>
  </span>
  Home
</a>

Variantes de Separador

Slash (padrao) / Chevron / Arrow / Pipe / Dot / Block
HTML 
<nav class="canta-breadcrumb">...</nav>                                    <!-- / -->
<nav class="canta-breadcrumb canta-breadcrumb--separator-chevron">...</nav>  <!-- > -->
<nav class="canta-breadcrumb canta-breadcrumb--separator-arrow">...</nav>    <!-- → -->
<nav class="canta-breadcrumb canta-breadcrumb--separator-pipe">...</nav>     <!-- | -->
<nav class="canta-breadcrumb canta-breadcrumb--separator-dot">...</nav>      <!-- • -->
<nav class="canta-breadcrumb canta-breadcrumb--separator-block">...</nav>    <!-- ■ -->

Variantes de Estilo

Borderless / Shadowed / Dark / Blue / Magenta
HTML 
<nav class="canta-breadcrumb canta-breadcrumb--borderless">...</nav>
<nav class="canta-breadcrumb canta-breadcrumb--shadowed">...</nav>
<nav class="canta-breadcrumb canta-breadcrumb--dark">...</nav>
<nav class="canta-breadcrumb canta-breadcrumb--blue">...</nav>
<nav class="canta-breadcrumb canta-breadcrumb--magenta">...</nav>

Tamanhos

Small / Default / Large
HTML 
<nav class="canta-breadcrumb canta-breadcrumb--sm">...</nav>
<nav class="canta-breadcrumb">...</nav>
<nav class="canta-breadcrumb canta-breadcrumb--lg">...</nav>

API

Classe Descricao
.canta-breadcrumbClasse base do container (nav, obrigatoria)
.canta-breadcrumb__listLista ordenada (ol) de itens
.canta-breadcrumb__itemItem individual (li)
.canta-breadcrumb__linkLink ou texto do item
.canta-breadcrumb__link--iconLink com icone (inline-flex + gap)
.canta-breadcrumb__iconContainer do icone dentro do link
.canta-breadcrumb__separatorSeparador entre itens (auto-oculto no ultimo)
.canta-breadcrumb--separator-chevronSeparador > (chevron)
.canta-breadcrumb--separator-arrowSeparador seta direita
.canta-breadcrumb--separator-pipeSeparador | (pipe)
.canta-breadcrumb--separator-dotSeparador ponto (bullet)
.canta-breadcrumb--separator-doubleSeparador // (duplo)
.canta-breadcrumb--separator-blockSeparador bloco quadrado brutalista
.canta-breadcrumb--borderlessRemove borda do container
.canta-breadcrumb--shadowedAdiciona sombra brutalista
.canta-breadcrumb--darkFundo escuro (preto)
.canta-breadcrumb--blueAccent azul CANTA no item ativo
.canta-breadcrumb--magentaAccent magenta CANTA no item ativo
.canta-breadcrumb--smTamanho pequeno
.canta-breadcrumb--lgTamanho grande
.canta-breadcrumb--collapsed-mobileColapsa itens do meio em mobile