Breadcrumb

src/pages/breadcrumb-demo.astro ASTRO

01 ---

02 import Breadcrumb from '@/components/Breadcrumb.astro';

03 ---

04

05 <Breadcrumb

06 items={[

07 { label: 'ryukami-labs', href: '/' },

08 { label: 'docs', href: '/docs' },

09 { label: 'button.astro', active: true },

10 ]}

11 />

src/components/Breadcrumb.tsx TSX // REACT

01 import React from 'react';

02 import { Breadcrumb } from '@/components/Breadcrumb';

03

04 export default function BreadcrumbExample() {

05 return (

06 <div className="space-y-4 font-mono">

07 <Breadcrumb

08 items={[

09 { label: 'ryukami-labs', href: '/' },

10 { label: 'docs', href: '/docs' },

11 { label: 'button.astro', active: true },

12 ]}

13 />

14 </div>

15 );

16 }

public/breadcrumb-snippet.html HTML // TAILWIND

01

02 <Breadcrumb

03 items={[

04 { label: 'ryukami-labs', href: '/' },

05 { label: 'docs', href: '/docs' },

06 { label: 'button.astro', active: true },

07 ]}

08 />

// VISTA PREVIA