Composable breadcrumb navigation primitives
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
import { Button } from '@/components/ui/button'
...import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
import { Button } from '@/components/ui/button'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
export default function BreadcrumbDemoExample() {
return (
<Breadcrumb><BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator />
<BreadcrumbItem><DropdownMenu><DropdownMenuTrigger asChild><Button size="icon-sm" variant="ghost"><BreadcrumbEllipsis /><span class="sr-only">Toggle menu</span></Button></DropdownMenuTrigger><DropdownMenuContent align="start"><DropdownMenuItem>Documentation</DropdownMenuItem><DropdownMenuItem>Themes</DropdownMenuItem><DropdownMenuItem>GitHub</DropdownMenuItem></DropdownMenuContent></DropdownMenu></BreadcrumbItem><BreadcrumbSeparator />
<BreadcrumbItem><BreadcrumbLink href="#">Components</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
</BreadcrumbList></Breadcrumb>
)
}
Installation
npx @fictjs/shadcn@latest add breadcrumbCopy the Fict shadcn component into your project.
Source
components/ui/breadcrumb.tsx
src/components/ui/breadcrumb.tsx
import { cn } from '@/lib/cn'
type NavProps = JSX.IntrinsicElements['nav']
type OlProps = JSX.IntrinsicElements['ol']
type LiProps = JSX.IntrinsicElements['li']
type AnchorProps = JSX.IntrinsicElements['a']
type SpanProps = JSX.IntrinsicElements['span']
export function Breadcrumb(props: NavProps) {
const { class: className, ...rest } = props
return <nav aria-label='breadcrumb' class={cn(className)} {...rest} />
}
export function BreadcrumbList(props: OlProps) {
const { class: className, ...rest } = props
return <ol class={cn('flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground sm:gap-2.5', className)} {...rest} />
}
export function BreadcrumbItem(props: LiProps) {
const { class: className, ...rest } = props
return <li class={cn('inline-flex items-center gap-1.5', className)} {...rest} />
}
export function BreadcrumbLink(props: AnchorProps) {
const { class: className, ...rest } = props
return <a class={cn('transition-colors hover:text-foreground', className)} {...rest} />
}
export function BreadcrumbPage(props: SpanProps) {
const { class: className, ...rest } = props
return <span aria-current='page' class={cn('font-normal text-foreground', className)} {...rest} />
}
export function BreadcrumbSeparator(props: SpanProps) {
const { class: className, children, ...rest } = props
return (
<span role='presentation' aria-hidden='true' class={cn('text-muted-foreground', className)} {...rest}>
{children ?? '/'}
</span>
)
}
export function BreadcrumbEllipsis(props: SpanProps) {
const { class: className, ...rest } = props
return (
<span role='presentation' aria-hidden='true' class={cn('flex h-9 w-9 items-center justify-center', className)} {...rest}>
...
</span>
)
}
Usage
Examples
Basic
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
...import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
export default function BreadcrumbBasicExample() {
return <Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink href="#">Components</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>
}
Separator
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
...import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
function DotIcon() {
return <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="2.5" /></svg>
}
export default function BreadcrumbSeparatorExample() {
return <Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator><DotIcon /></BreadcrumbSeparator><BreadcrumbItem><BreadcrumbLink href="/components">Components</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator><DotIcon /></BreadcrumbSeparator><BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>
}
Dropdown
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
...import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
function DotIcon() { return <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="2.5" /></svg> }
function ChevronDownIcon() { return <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg> }
export default function BreadcrumbDropdownExample() {
return (
<Breadcrumb><BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator><DotIcon /></BreadcrumbSeparator>
<BreadcrumbItem><DropdownMenu><DropdownMenuTrigger asChild><button class="flex items-center gap-1">Components<ChevronDownIcon /></button></DropdownMenuTrigger><DropdownMenuContent align="start"><DropdownMenuItem>Documentation</DropdownMenuItem><DropdownMenuItem>Themes</DropdownMenuItem><DropdownMenuItem>GitHub</DropdownMenuItem></DropdownMenuContent></DropdownMenu></BreadcrumbItem>
<BreadcrumbSeparator><DotIcon /></BreadcrumbSeparator><BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
</BreadcrumbList></Breadcrumb>
)
}
Ellipsis
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
...import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
export default function BreadcrumbEllipsisExample() {
return <Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink href="/docs/components">Components</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>
}
Link
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
...import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
export default function BreadcrumbLinkExample() {
return <Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbLink href="/components">Components</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>
}
Rtl
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
...import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
const translations = {
ar: { home: 'الرئيسية', components: 'المكونات', documentation: 'التوثيق', themes: 'السمات', github: 'جيت هاب', breadcrumb: 'مسار التنقل' },
he: { home: 'בית', components: 'רכיבים', documentation: 'תיעוד', themes: 'ערכות נושא', github: 'גיטהאב', breadcrumb: 'פירורי לחם' },
en: { home: 'Home', components: 'Components', documentation: 'Documentation', themes: 'Themes', github: 'GitHub', breadcrumb: 'Breadcrumb' },
} as const
function DotIcon() { return <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="2.5" /></svg> }
function ChevronDownIcon() { return <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg> }
export default function BreadcrumbRtlExample() {
let language = $state<keyof typeof translations>('ar')
const direction = () => language === 'en' ? 'ltr' : 'rtl'
const text = () => translations[language]
return (
<div class="grid gap-4"><select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof translations }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select>
<Breadcrumb dir={direction()}><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">{text().home}</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator><DotIcon /></BreadcrumbSeparator><BreadcrumbItem><DropdownMenu><DropdownMenuTrigger asChild><button class="flex items-center gap-1">{text().components}<ChevronDownIcon /></button></DropdownMenuTrigger><DropdownMenuContent><DropdownMenuItem>{text().documentation}</DropdownMenuItem><DropdownMenuItem>{text().themes}</DropdownMenuItem><DropdownMenuItem>{text().github}</DropdownMenuItem></DropdownMenuContent></DropdownMenu></BreadcrumbItem><BreadcrumbSeparator><DotIcon /></BreadcrumbSeparator><BreadcrumbItem><BreadcrumbPage>{text().breadcrumb}</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>
</div>
)
}