Pular para o conteúdo

Navegação estrutural

Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

Navegação estrutural simples

Press Enter to start editing

Último caminho ativo

Mantendo o último caminho de navegação interativo.

Separador customizado

Nos exemplos a seguir, nós estamos usando dois separadores de string e um ícone SVG.

Press Enter to start editing

Navegação estrutural retraída

Press Enter to start editing

Navegação estrutural customizada

Aqui está um exemplo de customização do componente. You can learn more about this in the overrides documentation page.

Press Enter to start editing

Integração com react-router

Acessibilidade

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)

Certifique-se de adcionar uma descrição aria-label no componente Breadcrumbs.

A acessibilidade neste componente conta com:

  • O conjunto de links são estruturados usando uma lista ordenada (elemento <ol>).
  • Para prevenir que os leitores de tela pronunciem os separadores visuais entre os links, eles são escondidos com aria-hidden.
  • Um elemento nav rotulado com aria-label identifica a estrutura como uma trilha de navegação estrutural e faz uma marcação na navegação para facilitar a localização.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.