Astryx Breadcrumbs

Navigation

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Breadcrumbs to your project and fits it to your theme.

Code

How Astryx Breadcrumbs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import Breadcrumbs, {BreadcrumbItem} from '@/components/ui/astryx-breadcrumbs';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Stack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';

const SEPARATORS = [
  {char: '›', label: 'Chevron'},
  {char: '→', label: 'Arrow'},
  {char: '·', label: 'Dot'},
];

export default function BreadcrumbsCustomSeparator() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Stack direction="vertical" gap={4}>
          {SEPARATORS.map(({char, label}) => (
            <Stack key={label} direction="vertical" gap={1}>
              <Text type="supporting" color="secondary">
                {label}
              </Text>
              <Breadcrumbs separator={char}>
                <BreadcrumbItem href="/">Home</BreadcrumbItem>
                <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
                <BreadcrumbItem isCurrent>API Reference</BreadcrumbItem>
              </Breadcrumbs>
            </Stack>
          ))}
        </Stack>
      </div>
    </Theme>
  );
}