Saltar al contenido

馃帀 Material UI v5 is out! Head to the migration guide to get started.

Migas de pan

Las Migas de pan permiten a los usuarios realizar selecciones desde un rango de valores.

Migas de pan 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>

Activa las 煤ltimas migas de pan

Mantenga las 煤ltimas migas de pan interactivas.

<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 personalizado

En los siguientes ejemplos, estamos usando dos cadenas como separadores, y un 铆cono SVG.

Migas de pan con 铆conos

Migas de pan colapsadas

<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>

Migas de pan personalizadas

He aqu铆 un ejemplo de personalizaci贸n del 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" />}
    onClick={handleClick}
  />
  <StyledBreadcrumb component="a" href="#" label="Catalog" onClick={handleClick} />
  <StyledBreadcrumb
    label="Accessories"
    deleteIcon={<ExpandMoreIcon />}
    onClick={handleClick}
    onDelete={handleClick}
  />
</Breadcrumbs>

Integraci贸n con react-router

Accesibilidad

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb)

Aseg煤rese de agregar una descripci贸n aria-label en el componente Breadcrumbs.

La accesibilidad de este componente se basa en:

  • El conjunto de v铆nculos est谩 estructurado usando una lista ordenada (elemento <ol>).
  • Para prevenir el anuncio del lector de pantalla de los separadores visuales entre los v铆nculos, se ocultan con aria-hidden.
  • Un elemento de navegaci贸n con la etiqueta aria-label identifica la estructura como un rastro de migas de pan y la convierte en un punto de referencia para que sea f谩cil de ubicar.