Breadcrumb

Páginas de 3+ niveles (Ajustes › Equipos › 4.º A). No en páginas de primer nivel.

Muestra dónde estás en páginas de segundo o tercer nivel.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/breadcrumb.json

import

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbPage, breadcrumbLinkClass } from "@moodinary/ui/components/breadcrumb";

Ejemplos

La última parte es BreadcrumbPage, sin link.

Código

route.tsx

import {
	Breadcrumb,
	BreadcrumbItem,
	BreadcrumbList,
	BreadcrumbPage,
	BreadcrumbSeparator,
	breadcrumbLinkClass,
} from "@moodinary/ui/components/breadcrumb";

export default function BreadcrumbRoute() {
	return (
		<Breadcrumb>
			<BreadcrumbList>
				<BreadcrumbItem>
					<a className={breadcrumbLinkClass} href="#ajustes">
						Ajustes
					</a>
				</BreadcrumbItem>
				<BreadcrumbItem>
					<BreadcrumbSeparator />
					<a className={breadcrumbLinkClass} href="#equipos">
						Equipos
					</a>
				</BreadcrumbItem>
				<BreadcrumbItem>
					<BreadcrumbSeparator />
					<BreadcrumbPage>4.º A tarde</BreadcrumbPage>
				</BreadcrumbItem>
			</BreadcrumbList>
		</Breadcrumb>
	);
}

Props

Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage

Prop	Tipo	Default	Descripción
...props	ComponentProps de nav, ol, li o span	-	Elementos nativos con estilos.
className	string	-	Clases extra.

BreadcrumbSeparator

Prop	Tipo	Default	Descripción
-	-	-	Sin props. Separador decorativo.

Cuándo sí y cuándo no

Hacé

Usalo desde el segundo nivel.
Escribí nombres reales de página.
Dejá la página actual sin link.

Evitá

No lo uses en la primera página de una sección.
No repitas el título justo debajo con otras palabras.
No pongas más de 4 niveles.

La página actual lleva aria-current="page".
El separador está oculto para lectores de pantalla.