72Başlayın
HextaUI

Breadcrumb

Geçerli sayfaya giden bağlantı izi; güvenle satır atlar, sağdan sola düzenlerde yansıtılır ve daraltılmış bölümleri yerinde açar.

import {
  Breadcrumb,
  BreadcrumbCollapse,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbCollapse>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Workspace</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Design system</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
        </BreadcrumbCollapse>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/breadcrumb.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Kompozisyon

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbCollapse
    │   ├── BreadcrumbItem
    │   └── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

Örnekler

Temel

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbBasic() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Simgelerle

Simgeler bağlantıların ve geçerli sayfanın içinde durur. Yalnızca simgeli bir bağlantıya aria-label verin.

import { IconFolder, IconHome } from "@tabler/icons-react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbWithIcons() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#" aria-label="Home">
            <IconHome />
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <IconFolder />
            Projects
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>
            <IconFolder />
            hextaui
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Özel ayırıcı

Oku değiştirmek için <BreadcrumbSeparator /> bileşeninin children'ı olarak herhangi bir öğe geçin.

import { IconPointFilled } from "@tabler/icons-react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbCustomSeparator() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <IconPointFilled className="size-2" />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <IconPointFilled className="size-2" />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Dropdown

Kardeş sayfalar sunmak için bir <DropdownMenu /> trigger'ı olarak <BreadcrumbLink /> oluşturun.

import { IconChevronDown } from "@tabler/icons-react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function BreadcrumbDropdown() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={<BreadcrumbLink render={<button type="button" />} />}
            >
              Components
              <IconChevronDown />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuGroup>
                <DropdownMenuItem>Documentation</DropdownMenuItem>
                <DropdownMenuItem>Themes</DropdownMenuItem>
                <DropdownMenuItem>GitHub</DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Daraltılmış

Ortadaki bölümleri <BreadcrumbCollapse /> içine sarın. Üç noktanın arkasında gizlenir ve yerinde kayarak açılır; odak ilk açığa çıkan bağlantıya geçer. Kontrol etmek için open ve onOpenChange geçin.

"use client"

import * as React from "react"

import {
  Breadcrumb,
  BreadcrumbCollapse,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"

export function BreadcrumbControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <div className="flex flex-col items-center gap-4">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbCollapse open={open} onOpenChange={setOpen}>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Documents</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">2026</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </BreadcrumbCollapse>
          <BreadcrumbItem>
            <BreadcrumbPage>Invoices</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <Button variant="outline" size="sm" onClick={() => setOpen(!open)}>
        {open ? "Collapse" : "Expand"}
      </Button>
    </div>
  )
}

Üç nokta

Statik bir <BreadcrumbEllipsis /> atlanan seviyeleri işaretler. Etkileşimli yapmadığınız sürece yardımcı teknolojilerden gizlenir.

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbEllipsisDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Link bileşeni

Çapayı (anchor) router'ınızın link'iyle, örneğin Next.js <Link /> ile değiştirmek için render prop'unu kullanın.

import Link from "next/link"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbLinkComponent() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink render={<Link href="/docs" />}>Docs</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Uzun içerik

Kırılmayan adlar taşmak yerine sarar, azami genişliği olan bölümler ise kısaltılır.

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbLongContent() {
  return (
    <div className="flex w-72 flex-col gap-4">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">
              averyveryverylongunbrokenfoldernamethatshouldneverescape
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>
              An unusually long page title that wraps onto a second line
            </BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">
              <span className="max-w-24 truncate">
                Customer success playbooks
              </span>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>
              <span className="max-w-32 truncate">
                Onboarding checklist for enterprise accounts
              </span>
            </BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  )
}

Sağdan sola

Ayırıcılar ters döner ve daralma doğru taraftan animasyonlanır.

import {
  Breadcrumb,
  BreadcrumbCollapse,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbRtl() {
  return (
    <div dir="rtl">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">الرئيسية</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbCollapse label="عرض المسار الكامل">
            <BreadcrumbItem>
              <BreadcrumbLink href="#">المكونات</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">التنقل</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </BreadcrumbCollapse>
          <BreadcrumbItem>
            <BreadcrumbPage>مسار التنقل</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  )
}

Klavye

Bağlantılar ve daraltma düğmesi normal tab duraklarıdır. Ayırıcılar ve statik bir üç nokta atlanır.

TuşAction
TabShift + TabBağlantılar ve daraltma düğmesi arasında gezinir.
EnterOdaktaki bağlantıyı izler.
EnterSpaceDaraltma düğmesinde gizli bölümleri açığa çıkarır. Açılma kayması bittiğinde odak, ilk açığa çıkan bağlantıya geçer.

API referansı

Her parça, oluşturduğu öğenin niteliklerini ve o öğeyi değiştirmek için bir render prop'unu kabul eder.

Breadcrumb

PropTürVarsayılan
renderYardımcı teknolojiler için “Breadcrumb” olarak etiketlenir.
ReactElement | (props, state) => ReactElement<nav>
ÖznitelikAçıklama
data-slot="breadcrumb"<nav> landmark'ı.

BreadcrumbList

PropTürVarsayılan
render
ReactElement | (props, state) => ReactElement<ol>
ÖznitelikAçıklama
data-slot="breadcrumb-list"Sıralı liste. Yer bittiğinde öğeler yeni satırlara sarar.

BreadcrumbItem

PropTürVarsayılan
render
ReactElement | (props, state) => ReactElement<li>
ÖznitelikAçıklama
data-slot="breadcrumb-item"CSS'te öğeleri hedefleyin.
data-collapsedÖğe kapalı bir BreadcrumbCollapse içinde gizliyken bulunur.
data-breadcrumb-groupBreadcrumbCollapse içindeki öğelerde bulunur. Aynı grubun tüm parçaları tarafından paylaşılır.

BreadcrumbLink

PropTürVarsayılan
href
string–
renderRouter'ınızın link bileşenini buraya geçin.
ReactElement | (props, state) => ReactElement<a>
ÖznitelikAçıklama
data-slot="breadcrumb-link"CSS'te bağlantıları hedefleyin.

BreadcrumbPage

PropTürVarsayılan
renderaria-current="page" ile işaretlenir.
ReactElement | (props, state) => ReactElement<span>
ÖznitelikAçıklama
data-slot="breadcrumb-page"aria-current="page" ile geçerli sayfa.

BreadcrumbSeparator

PropTürVarsayılan
childrenSağdan sola düzenlerde otomatik olarak yansıtılır.
ReactNode<IconChevronRight />
render
ReactElement | (props, state) => ReactElement<li>
ÖznitelikAçıklama
data-slot="breadcrumb-separator"Yalnızca görseldir ve yardımcı teknolojilerden gizlenir.
data-collapsedAyırıcı kapalı bir BreadcrumbCollapse içinde gizliyken bulunur.
data-breadcrumb-groupBreadcrumbCollapse içindeki ayırıcılarda bulunur.

BreadcrumbEllipsis

PropTürVarsayılan
children
ReactNode<IconDots />
renderrender veya onClick etkileşimli yapmadıkça yardımcı teknolojilerden gizlenir.
ReactElement | (props, state) => ReactElement<span>
ÖznitelikAçıklama
data-slot="breadcrumb-ellipsis"CSS'te üç noktayı hedefleyin.

BreadcrumbCollapse

PropTürVarsayılan
childrenÜç noktanın arkasında gizlenecek öğeler ve ayırıcılar.
ReactNode–
open
boolean–
defaultOpen
booleanfalse
onOpenChange
(open: boolean) => void–
labelÜç nokta düğmesinin erişilebilir adı.
string"Show full path"
ÖznitelikAçıklama
data-slot="breadcrumb-collapse"Üç nokta düğmesini tutan <li>.
data-collapsedGrup açıldıktan sonra üç nokta öğesinde bulunur; bu da onu gizler.

İlgili