Components
/Astryx Breadcrumbs/
Astryx Breadcrumbs
Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick handlers; supports custom separators and a subtler supporting variant.
Loading preview...
'use client';
import Breadcrumbs, {BreadcrumbItem} from '@/components/ui/astryx-breadcrumbs';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Icon} from '@astryxdesign/core/Icon';
import {HomeIcon, Cog6ToothIcon} from '@heroicons/react/24/outline';
export default function BreadcrumbsWithIcons() {
return (
<Theme theme={neutralTheme}>
<div
style={{
minHeight: '100dvh',
display: 'grid',
placeItems: 'center',
padding: 24,
}}>
<Breadcrumbs>
<BreadcrumbItem
href="/"
startIcon={<Icon icon={HomeIcon} size="sm" />}>
Home
</BreadcrumbItem>
<BreadcrumbItem
href="/settings"
startIcon={<Icon icon={Cog6ToothIcon} size="sm" />}>
Settings
</BreadcrumbItem>
<BreadcrumbItem isCurrent>Profile</BreadcrumbItem>
</Breadcrumbs>
</div>
</Theme>
);
}
More examples
BreadcrumbsOpen page →
Loading preview...
Deep HierarchyOpen page →
Loading preview...
Custom SeparatorOpen page →
Loading preview...
Supporting VariantOpen page →
Loading preview...