Component - Fil d'ariane / Breadcrumbs
- breadcrumbs
- design
- element
- tailwindcss
Un component de fil d'ariane en React, facile à réutiliser et plutôt pas mal en terme d'ergonomie et d'accessibilité (enfin je trouve).
export function Breadcrumb({links}) {
return (
<nav aria-label="Breadcrumb">
<ol role="list">
{links.map((link, index, {length}) => {
const isLastLink = index === length - 1;
return (
<li key={`breadcrumb-link-${index}`}>
<a href={link.href} aria-current={isLastLink ? 'page' : undefined}>
{link.label}
</a>
</li>
);
})}
</ol>
</nav>
)
}
<Breadcrumb
links={[
{ label: "Link 1", href: "" },
{ label: "Link 2", href: "" },
{ label: "Link 3", href: "" }
]}
/>