Breadcrumb
Auxiliar de navegação que mostra a localização atual do usuário dentro de uma hierarquia de páginas. Breadcrumbs ajudam os usuários a entender onde estão e navegar de volta para páginas pai.Navigation aid showing the user's current location within a page hierarchy. Breadcrumbs help users understand where they are and navigate back to parent pages.
Quando usarWhen to use
Use breadcrumbs quandoUse breadcrumbs when
O site tem navegação hierárquica e o usuário precisa ver sua localização atual e navegar de volta para páginas pai. Ideal para sites com muito conteúdo com 3+ níveis de profundidade.The site has hierarchical navigation and the user needs to see their current location and navigate back to parent pages. Ideal for content-heavy sites with 3+ levels of depth.
Não use breadcrumbs quandoDon't use breadcrumbs when
O site é plano (apenas 1-2 níveis), o fluxo é linear (use um button voltar), ou há apenas um nível acima da página atual.The site is flat (1-2 levels only), the flow is linear (use a back button instead), or there is only a single level above the current page.
AnatomiaAnatomy
1
2
3
1 Nav — elemento
2 Lista (
3 Item (
4 Link — páginas pai navegáveis.Link — navigable parent pages.
5 Atual (
6 Separador — texto decorativo ou gerado via CSS entre os itens.Separator — CSS-generated or decorative text between items.
<nav> com aria-label="Breadcrumb".Nav — <nav> element with aria-label="Breadcrumb".2 Lista (
.ds-breadcrumb) — <ol> contendo os itens do breadcrumb.List (.ds-breadcrumb) — <ol> containing breadcrumb items.3 Item (
.ds-breadcrumb__item) — entrada individual do breadcrumb.Item (.ds-breadcrumb__item) — individual breadcrumb entry.4 Link — páginas pai navegáveis.Link — navigable parent pages.
5 Atual (
.ds-breadcrumb__item--current) — texto (não um link), com aria-current="page".Current (.ds-breadcrumb__item--current) — text (not a link), with aria-current="page".6 Separador — texto decorativo ou gerado via CSS entre os itens.Separator — CSS-generated or decorative text between items.
Breadcrumb básicoBasic breadcrumb
Uma hierarquia simples de 3 níveis. O último item é a página atual e não é um link.A simple 3-level hierarchy. The last item is the current page and is not a link.
Hierarquia profundaDeep hierarchy
Um trail de breadcrumb de 5 níveis para páginas profundamente aninhadas.A 5-level breadcrumb trail for deeply nested pages.
Dois níveisTwo levels
O breadcrumb mínimo útil tem apenas um pai e a página atual.The minimum useful breadcrumb has just a parent and the current page.
Boas práticasBest practices
Faça
Mostre o caminho completo da hierarquia desde a raiz. Página atual como texto (não um link).Show the full hierarchy path from root. Current page as text (not a link).
Não faça
Truncar níveis intermediários. Não torne a página atual clicável.Truncate intermediate levels. Don't make the current page clickable.
Diretrizes de conteúdoContent guidelines
| RegraRule | ExemploExample |
|---|---|
| Rótulos correspondem exatamente aos títulos das páginasLabels match page titles exactly | "Products" no breadcrumb corresponde ao título da página "Products""Products" in breadcrumb matches the "Products" page title |
| Use caixa de fraseUse sentence case | "Getting started" — não "Getting Started" ou "GETTING STARTED""Getting started" — not "Getting Started" or "GETTING STARTED" |
| Mantenha a hierarquia em 3-5 níveisKeep hierarchy to 3-5 levels | Home / Dashboard / Settings / Security — não 8+ níveis de profundidadeHome / Dashboard / Settings / Security — not 8+ levels deep |
Mapeamento de tokensToken mapping
| PropriedadeProperty | Token | Variável CSSCSS variable |
|---|---|---|
| gap da listalist gap | component.breadcrumb.gap.default | --ds-breadcrumb-gap-default |
| raio do focus ringfocus ring radius | component.breadcrumb.focus-ring.radius.default | --ds-breadcrumb-focus-ring-radius-default |
| tipografia do rótulolabel typography | component.breadcrumb.label.{font-size,line-height,font-weight,letter-spacing}.default | --ds-breadcrumb-label-*-default |
| tipografia do separadorseparator typography | component.breadcrumb.separator.{font-size,line-height,font-weight,letter-spacing}.default | --ds-breadcrumb-separator-*-default |
| cor do linklink color | semantic.link.content.default | --ds-link-content-default |
| link hoverlink hover | semantic.link.content.hover | --ds-link-content-hover |
| texto atualcurrent text | semantic.content.default | --ds-content-default |
| cor do separadorseparator color | semantic.content.subtle | --ds-content-subtle |
Classes CSSCSS classes
| ClasseClass | DescriçãoDescription |
|---|---|
ds-breadcrumb | Container do breadcrumb (use em <nav>)Breadcrumb container (use on <nav>) |
ds-breadcrumb__item | Link ou texto individual do breadcrumbIndividual breadcrumb link or text |
ds-breadcrumb__item--current | Item da página atual (não clicável)Current page item (non-clickable) |
ds-breadcrumb__separator | Separador visual entre itens (ex: "/")Visual separator between items (e.g. "/") |
Interação por tecladoKeyboard interaction
| TeclaKey | AçãoAction |
|---|---|
Tab | Move o foco entre os links do breadcrumb (a página atual não é focável)Moves focus between breadcrumb links (current page is not focusable) |
Enter | Navega para o link focadoNavigates to the focused link |
O item da página atual é um <span>, não um link, então é naturalmente excluído da ordem de tabulação. Separadores são decorativos e não focáveis.The current page item is a <span>, not a link, so it is naturally excluded from the tab order. Separators are decorative and not focusable.
AccessibilityAccessibility
| Critério WCAGWCAG criterion | RequisitoRequirement | Status |
|---|---|---|
| 1.3.1 Info and Relationships (A) | Landmark <nav> com aria-label="Breadcrumb". Usa <ol> para estrutura semântica de lista.<nav> landmark with aria-label="Breadcrumb". Uses <ol> for semantic list structure. | ✓ |
| 2.4.8 Location (AAA) | Comunica a localização atual do usuário dentro da hierarquia do site.Communicates user's current location within the site hierarchy. | ✓ |
| 4.1.2 Name, Role, Value (A) | aria-current="page" no item da página atual.aria-current="page" on the current page item. | ✓ |
Resumo dos atributos ARIAARIA attributes summary
aria-label="Breadcrumb" — no elemento <nav> para identificar o landmark.aria-current="page" — no item da página atual para comunicar a localização a leitores de tela.Separadores devem ser puramente decorativos (gerados via CSS ou
aria-hidden="true").aria-label="Breadcrumb" — on the <nav> element to identify the landmark.aria-current="page" — on the current page item to communicate location to screen readers.Separators should be purely decorative (CSS-generated or
aria-hidden="true").