A
Accueil > Components > Breadcrumbs

Breadcrumbs

Fil d'Ariane construit à partir de la navigation Expo Router. Tous les éléments sauf le dernier (page en cours) sont cliquables.TagsuiInformationsFigmaExemples6StylesDisponibles
Default
Accueil > Components > Breadcrumbs
export const Default = () => (
<Box p={4}>
<Breadcrumbs />
</Box>
);
WithCustomRootLabel
Tableau de bord > Components > Breadcrumbs
export const WithCustomRootLabel = () => (
<Box p={4}>
<Breadcrumbs rootLabel="Tableau de bord" />
</Box>
);
WithCustomLabels
Accueil > components > Breadcrumbs
export const WithCustomLabels = () => (
<Box p={4}>
<Breadcrumbs
getLabel={(segment, _index, _path) => {
const labels: Record<string, string> = {
admin: 'Administration',
missions: 'Missions',
show: 'Détail',
salarie: 'Espace salarié',
client: 'Espace client',
};
return labels[segment] ?? segment;
}}
/>
</Box>
);
WithCustomHref
Accueil > Components > Breadcrumbs
export const WithCustomHref = () => (
<Box p={4}>
<Breadcrumbs
getHref={(segment, _index, path) => {
const hrefs: Record<string, string> = {
components: '/ui-kit/components',
};
return hrefs[segment] ?? path;
}}
/>
</Box>
);
Accueil > Components > Breadcrumbs
export const WithNoLink = () => (
<Box p={4}>
<Breadcrumbs
getHref={(segment, _index, path) => {
const noLink = ['components'];
return noLink.includes(segment) ? null : path;
}}
/>
</Box>
);
WithSegmentsToSkip
Accueil > Breadcrumbs
export const WithSegmentsToSkip = () => (
<Box p={4}>
<Breadcrumbs
segmentsToSkip={['admin', 'ui-kit', 'components']}
getLabel={(segment, _index, _path) => {
const labels: Record<string, string> = {
admin: 'Administration',
missions: 'Missions',
show: 'Détail',
salarie: 'Espace salarié',
client: 'Espace client',
};
return labels[segment] ?? segment;
}}
/>
</Box>
);
Alveole UI Kit — v1.8.4