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

<Breadcrumbs aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="/">
    MUI
  </Link>
  <Link
    underline="hover"
    color="inherit"
    href="/material-ui/getting-started/installation/"
  >
    Core
  </Link>
  <Typography color="text.primary">Breadcrumbs</Typography>
</Breadcrumbs>
<Breadcrumbs aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="/">
    MUI
  </Link>
  <Link
    underline="hover"
    color="inherit"
    href="/material-ui/getting-started/installation/"
  >
    Core
  </Link>
  <Typography color="text.primary">Breadcrumbs</Typography>
</Breadcrumbs>

Press Enter to start editing

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.

<Breadcrumbs separator="›" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs separator="-" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs
  separator={<NavigateNextIcon fontSize="small" />}
  aria-label="breadcrumb"
>
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs separator="›" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs separator="-" aria-label="breadcrumb">
  {breadcrumbs}
</Breadcrumbs>
<Breadcrumbs
  separator={<NavigateNextIcon fontSize="small" />}
  aria-label="breadcrumb"
>
  {breadcrumbs}
</Breadcrumbs>

Press Enter to start editing

Navegação estrutural com ícones

Navegação estrutural retraída

<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="#">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Catalog
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Accessories
  </Link>
  <Link underline="hover" color="inherit" href="#">
    New Collection
  </Link>
  <Typography color="text.primary">Belts</Typography>
</Breadcrumbs>
<Breadcrumbs maxItems={2} aria-label="breadcrumb">
  <Link underline="hover" color="inherit" href="#">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Catalog
  </Link>
  <Link underline="hover" color="inherit" href="#">
    Accessories
  </Link>
  <Link underline="hover" color="inherit" href="#">
    New Collection
  </Link>
  <Typography color="text.primary">Belts</Typography>
</Breadcrumbs>

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.

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

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.

Navegação estrutural

Navegação estrutural simples

Último caminho ativo

Separador customizado

Navegação estrutural com ícones

Navegação estrutural retraída

Navegação estrutural customizada

Integração com react-router

Acessibilidade

API