Navegação estrutural

Navegação estrutural permite aos usuários fazer seleções em um intervalo de caminhos.

Navegação estrutural simples

<Breadcrumbs aria-label="breadcrumb">
  <Link color="inherit" href="/" onClick={handleClick}>
    Material-UI
  </Link>
  <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
    Core
  </Link>
  <Typography color="textPrimary">Breadcrumb</Typography>
</Breadcrumbs>

Último caminho ativo

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

<Breadcrumbs aria-label="breadcrumb">
  <Link color="inherit" href="/" onClick={handleClick}>
    Material-UI
  </Link>
  <Link color="inherit" href="/getting-started/installation/" onClick={handleClick}>
    Core
  </Link>
  <Link
    color="textPrimary"
    href="/components/breadcrumbs/"
    onClick={handleClick}
    aria-current="page"
  >
    Breadcrumb
  </Link>
</Breadcrumbs>

Separador customizado

No exemplo a seguir, nós usamos duas strings separadoras, e um ícone SVG.

Navegação estrutural com ícones

Navegação estrutural retraída

<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link color="inherit" href="#" onClick={handleClick}>
    Home
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    Catalog
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    Accessories
  </Link>
  <Link color="inherit" href="#" onClick={handleClick}>
    New Collection
  </Link>
  <Typography color="textPrimary">Belts</Typography>
</Breadcrumbs>

Navegação estrutural customizada

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

<Breadcrumbs aria-label="breadcrumb">
  <StyledBreadcrumb
    component="a"
    href="#"
    label="Home"
    icon={<HomeIcon fontSize="small" />}
    onClick={handleClick}
  />
  <StyledBreadcrumb component="a" href="#" label="Catalog" onClick={handleClick} />
  <StyledBreadcrumb
    label="Accessories"
    deleteIcon={<ExpandMoreIcon />}
    onClick={handleClick}
    onDelete={handleClick}
  />
</Breadcrumbs>

Integração com react-router

Acessibilidade

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#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.