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 estao é 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 hierarquica e o usuário precisa ver sua localização atual é 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 e plano (apenas 1-2 níveis), o fluxo e 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
4
5
6
1 Nav — elemento
2 Lista (
3 Item (
4 Link — páginas pai navegaveis.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 navegaveis.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 basicoBasic breadcrumb
Uma hierarquia simples de 3 níveis. O ultimo item é a página atual e não e 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 util com apenas um pai é a página atual.The minimum useful breadcrumb with 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 intermediarios. 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 |
|---|---|
| Rotulos 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 (semantic) | Variavel CSSCSS variable |
|---|---|---|
| cor do linklink color | semantic.link.content-default | --ds-link-content-default |
| link hoverlink hover | — | text-decoration: underline (sem mudança de cor)text-decoration: underline (no color change) |
| texto atualcurrent text | semantic.content.default | --ds-content-default |
| separadorseparator | semantic.content.tertiary | --ds-content-tertiary |
Classes CSSCSS classes
| ClasseClass | DescricaoDescription |
|---|---|
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 e 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 e um <span>, não um link, então e naturalmente excluido da ordem de tabulacao. 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
| Criterio WCAGWCAG criterion | RequisitoRequirement | Status |
|---|---|---|
| 1.3.1 Info and Relationships (A) | Landmark <nav> com aria-label="Breadcrumb". Usa <ol> para estrutura semantica 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").