Astryx Breadcrumb Item

Navigation

About

An individual Astryx breadcrumb item supporting links, current-page text, icons, and click handlers.

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

Code

How Astryx Breadcrumb Item 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-breadcrumb-item';

function BreadcrumbItemBasic() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/settings">Settings</BreadcrumbItem>
      <BreadcrumbItem isCurrent>Profile</BreadcrumbItem>
    </Breadcrumbs>
  );
}

export default function BreadcrumbItemBasicDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <BreadcrumbItemBasic />
    </div>
  );
}