Breadcrumb

Breadcrumb is used to navigate to the current location

default

import { Breadcrumb, BreadcrumbItem } from "@/components/ui/Breadcrumb";

export default function Page() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="/docs/buttons">Button</BreadcrumbItem>
      <BreadcrumbItem href="/docs/avatars">Avatar</BreadcrumbItem>
      <BreadcrumbItem asCurrent>Breadcrumb</BreadcrumbItem>
    </Breadcrumb>
  )
}

variant

import { Breadcrumb, BreadcrumbItem } from "@/components/ui/Breadcrumb";

export default function Page() {
  return (
    <Breadcrumb variant="underline">
      <BreadcrumbItem href="/docs/buttons">Button</BreadcrumbItem>
      <BreadcrumbItem href="/docs/avatars">Avatar</BreadcrumbItem>
      <BreadcrumbItem asCurrent>Breadcrumb</BreadcrumbItem>
    </Breadcrumb>
  )
}

size

import { Breadcrumb, BreadcrumbItem } from "@/components/ui/Breadcrumb";

export default function Page() {
  return (
    <div className="space-y-4">
      <Breadcrumb size="sm">
        <BreadcrumbItem href="/docs/buttons">Button</BreadcrumbItem>
        <BreadcrumbItem href="/docs/avatars">Avatar</BreadcrumbItem>
        <BreadcrumbItem asCurrent>Breadcrumb</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb size="md">
        <BreadcrumbItem href="/docs/buttons">Button</BreadcrumbItem>
        <BreadcrumbItem href="/docs/avatars">Avatar</BreadcrumbItem>
        <BreadcrumbItem asCurrent>Breadcrumb</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb size="lg">
        <BreadcrumbItem href="/docs/buttons">Button</BreadcrumbItem>
        <BreadcrumbItem href="/docs/avatars">Avatar</BreadcrumbItem>
        <BreadcrumbItem asCurrent>Breadcrumb</BreadcrumbItem>
      </Breadcrumb>
    </div>
  )
}

disabled

import { Breadcrumb, BreadcrumbItem } from "@/components/ui/Breadcrumb";

export default function Page() {
  return (
    <Breadcrumb>
      <BreadcrumbItem disabled href="/docs/buttons">Button</BreadcrumbItem>
      <BreadcrumbItem href="/docs/avatars">Avatar</BreadcrumbItem>
      <BreadcrumbItem asCurrent>Breadcrumb</BreadcrumbItem>
    </Breadcrumb>
  )
}

custom separator

import { Breadcrumb, BreadcrumbItem } from "@/components/ui/Breadcrumb";

export default function Page() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="/docs/buttons" separator="/">Button</BreadcrumbItem>
      <BreadcrumbItem href="/docs/avatars" separator="/">Avatar</BreadcrumbItem>
      <BreadcrumbItem asCurrent>Breadcrumb</BreadcrumbItem>
    </Breadcrumb>
  )
}

icon

import { Breadcrumb, BreadcrumbItem } from "@/components/ui/Breadcrumb";
import { IconHome, IconDashboard } from '@tabler/icons-react';

export default function Page() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="#">
        <IconHome size="1em" />
        Home
      </BreadcrumbItem>
      <BreadcrumbItem href="#">
        <IconDashboard size="1em" />
        Dashboard
      </BreadcrumbItem>
      <BreadcrumbItem asCurrent>Data</BreadcrumbItem>
    </Breadcrumb>
  )
}