---
title: "Breadcrumb"
description: "Mevcut sayfaya giden yol. shadcn/ui'ın composable breadcrumb'ı, ikas stiliyle; tek bir separator prop'u tüm yolu değiştirir."
---

<Callout type="info" title="Ne zaman kullanılır">
Ekran iki seviyeden derinse: liste, kayıt, alt kayıt (Siparişler, #10482, İade talebi gibi). Yol `PageHeader`'ın üstünde durur ve ekranın kendi başlığıyla biter. Uygulamanın adıyla başlamaz; uygulama adı panelin üst barında zaten görünür.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/breadcrumb
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Temel

Uzun bir yolun ortası menüye toplanır. `BreadcrumbEllipsis`'i bir `DropdownMenuTrigger` içine koyduğunuzda gizlenen adımlar menüde listelenir.

**Örnek: Temel** (`breadcrumb/basic`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/breadcrumb/basic)

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

/** A trail with its middle collapsed into a menu. */
export default function BreadcrumbBasic() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Ürünler</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger
              aria-label="Diğer sayfalar"
              className="rounded-md outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/30 aria-expanded:bg-muted"
            >
              <BreadcrumbEllipsis />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-auto">
              <DropdownMenuItem>Kategoriler</DropdownMenuItem>
              <DropdownMenuItem>Giyim</DropdownMenuItem>
              <DropdownMenuItem>Aksesuar</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Kışlık</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Yün atkı</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

### Sayfada

İki seviyeden derin bir ekranda yol `PageHeader`'ın hemen üstünde durur. Son öğe `BreadcrumbPage`'dir ve başlıkla aynı adı taşır.

**Örnek: Sayfada** (`breadcrumb/in-page`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/breadcrumb/in-page)

```tsx
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Card, CardContent } from "@/components/ui/card"
import { Page, PageHeader } from "@/components/ikas/page"

/** Two levels deep: the trail sits above the PageHeader and ends on the screen's own title. */
export default function BreadcrumbInPage() {
  return (
    <Page>
      <div className="flex flex-col gap-2">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Siparişler</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">#10482</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>İade talebi</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <PageHeader
        title="İade talebi"
        badges={<Badge status="warning">Onay bekliyor</Badge>}
        actions={
          <>
            <Button variant="outline">Reddet</Button>
            <Button>İadeyi onayla</Button>
          </>
        }
      />
      </div>
      <Card>
        <CardContent className="text-sm text-muted-foreground">2 ürün · ₺640,00 · Beden uymadı</CardContent>
      </Card>
    </Page>
  )
}
```

### Ayırıcı

`Breadcrumb`'a verilen tek bir `separator` prop'u yoldaki tüm ayırıcıları değiştirir. Tek bir `BreadcrumbSeparator`'ın children'ı yine de onu geçersiz kılar. Varsayılan ayırıcı ok başıdır.

**Örnek: Ayırıcı** (`breadcrumb/separator`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/breadcrumb/separator)

```tsx
import * as React from "react"
import { ArrowRightIcon, ChevronRightIcon, DotIcon, SlashIcon } from "lucide-react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { SegmentedControl } from "@/components/ikas/segmented-control"

const separators = {
  chevron: { label: "Ok başı", icon: <ChevronRightIcon /> },
  slash: { label: "Eğik çizgi", icon: <SlashIcon /> },
  dot: { label: "Nokta", icon: <DotIcon /> },
  arrow: { label: "Ok", icon: <ArrowRightIcon /> },
} as const

type Separator = keyof typeof separators

/** One `separator` on Breadcrumb changes every separator in the trail. */
export default function BreadcrumbCustomSeparator() {
  const [separator, setSeparator] = React.useState<Separator>("slash")

  return (
    <div className="flex flex-col items-center gap-6">
      <Breadcrumb separator={separators[separator].icon}>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Ayarlar</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Kargo</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Teslimat bölgeleri</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>İstanbul</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <div className="flex justify-center self-stretch border-t pt-5">
        <SegmentedControl
          size="sm"
          mode="radio"
          aria-label="Ayraç"
          value={separator}
          onValueChange={setSeparator}
          options={Object.entries(separators).map(([value, s]) => ({
            value: value as Separator,
            icon: s.icon,
            "aria-label": s.label,
          }))}
        />
      </div>
    </div>
  )
}
```

### İkonlar

İkon, etiketin önünde hizalanır. Yalnızca ikondan oluşan ilk adıma `aria-label` verin.

**Örnek: İkonlar** (`breadcrumb/icons`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/breadcrumb/icons)

```tsx
import { FolderIcon, HouseIcon, PackageIcon, TagIcon } from "lucide-react"

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

/** Icons sit before the label; an icon-only first step needs an aria-label. */
export default function BreadcrumbIcons() {
  return (
    <div className="flex flex-col items-center gap-6">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#" aria-label="Ana sayfa">
              <HouseIcon />
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">
              <PackageIcon />
              Ürünler
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">
              <FolderIcon />
              Kışlık
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>
              <TagIcon />
              Yün atkı
            </BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#" aria-label="Ana sayfa">
              <HouseIcon />
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">Ürünler</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Yün atkı</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  )
}
```

### Kardeş sayfalara menü

Bir öğe kendi kardeşlerini açabilir: kullanıcı bir üst seviyeye çıkmadan başka bir ayar grubuna geçer.

**Örnek: Kardeş sayfalara menü** (`breadcrumb/dropdown`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/breadcrumb/dropdown)

```tsx
import { ChevronDownIcon, SlashIcon } from "lucide-react"

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

/** An item that opens its siblings: jump to another settings group without going up first. */
export default function BreadcrumbDropdown() {
  return (
    <Breadcrumb separator={<SlashIcon />}>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Ayarlar</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger className="flex items-center gap-1 rounded-sm outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/30 aria-expanded:text-foreground [&_svg]:size-3.5">
              Kargo
              <ChevronDownIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-auto">
              <DropdownMenuItem>Ödeme</DropdownMenuItem>
              <DropdownMenuItem>Kargo</DropdownMenuItem>
              <DropdownMenuItem>Bildirimler</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Teslimat bölgeleri</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

### Daraltılmış

Uzun yolda ilk ve son adımlar kalır, ortası `BreadcrumbEllipsis` ile kısalır.

**Örnek: Daraltılmış** (`breadcrumb/collapsed`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/breadcrumb/collapsed)

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

/** A long trail keeps its first and last steps; the middle collapses to an ellipsis. */
export default function BreadcrumbCollapsed() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Ürünler</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Kışlık</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Yün atkı</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

### Router linki

`BreadcrumbLink asChild` stilleri `next/link` gibi router'ın kendi link bileşenine aktarır.

**Örnek: Router linki** (`breadcrumb/link`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/breadcrumb/link)

```tsx
import Link from "next/link"

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

/** Router apps: `asChild` puts the styles on the router's own link. */
export default function BreadcrumbWithLink() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="?">Siparişler</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="?">#10482</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>İade talebi</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

### Responsive

Masaüstünde gizlenen adımlar menüde, telefonda drawer'da açılır.

**Örnek: Responsive** (`breadcrumb/responsive`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/breadcrumb/responsive)

```tsx
import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const items = [
  { href: "#", label: "Ürünler" },
  { href: "#", label: "Kategoriler" },
  { href: "#", label: "Giyim" },
  { href: "#", label: "Kışlık aksesuarlar" },
  { label: "Yumuşak dokulu yün atkı" },
]

/** First and last two items stay; the rest collapse. */
const SHOWN = 3

function subscribe(onChange: () => void) {
  const query = window.matchMedia("(min-width: 768px)")
  query.addEventListener("change", onChange)
  return () => query.removeEventListener("change", onChange)
}

function useDesktop() {
  return React.useSyncExternalStore(
    subscribe,
    () => window.matchMedia("(min-width: 768px)").matches,
    () => true
  )
}

const triggerClass =
  "rounded-md outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/30 aria-expanded:bg-muted"

/** Collapsed steps open in a menu on desktop and in a drawer on phones; long labels truncate. */
export default function BreadcrumbResponsive() {
  const [open, setOpen] = React.useState(false)
  const desktop = useDesktop()
  const hidden = items.slice(1, -(SHOWN - 1))

  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href={items[0].href}>{items[0].label}</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        {items.length > SHOWN && (
          <>
            <BreadcrumbItem>
              {desktop ? (
                <DropdownMenu open={open} onOpenChange={setOpen}>
                  <DropdownMenuTrigger aria-label="Diğer sayfalar" className={triggerClass}>
                    <BreadcrumbEllipsis />
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="start" className="w-auto">
                    {hidden.map((item) => (
                      <DropdownMenuItem key={item.label} asChild>
                        <a href={item.href}>{item.label}</a>
                      </DropdownMenuItem>
                    ))}
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : (
                <Drawer open={open} onOpenChange={setOpen}>
                  <DrawerTrigger aria-label="Diğer sayfalar" className={triggerClass}>
                    <BreadcrumbEllipsis />
                  </DrawerTrigger>
                  <DrawerContent>
                    <DrawerHeader className="text-left">
                      <DrawerTitle>Sayfaya git</DrawerTitle>
                      <DrawerDescription>Bu ürüne giden yoldaki sayfalar.</DrawerDescription>
                    </DrawerHeader>
                    <div className="flex flex-col gap-1 px-4">
                      {hidden.map((item) => (
                        <Button key={item.label} variant="ghost" size="lg" className="justify-start" asChild>
                          <a href={item.href}>{item.label}</a>
                        </Button>
                      ))}
                    </div>
                    <DrawerFooter>
                      <DrawerClose asChild>
                        <Button variant="outline">Kapat</Button>
                      </DrawerClose>
                    </DrawerFooter>
                  </DrawerContent>
                </Drawer>
              )}
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </>
        )}
        {items.slice(-(SHOWN - 1)).map((item, index, shown) => (
          <React.Fragment key={item.label}>
            <BreadcrumbItem>
              {item.href ? (
                <BreadcrumbLink href={item.href} className="max-w-20 truncate md:max-w-none">
                  {item.label}
                </BreadcrumbLink>
              ) : (
                <BreadcrumbPage className="max-w-20 truncate md:max-w-none">{item.label}</BreadcrumbPage>
              )}
            </BreadcrumbItem>
            {index < shown.length - 1 && <BreadcrumbSeparator />}
          </React.Fragment>
        ))}
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Yalnızca iki seviyeden derin ekranlarda kullanın; yolu PageHeader'ın üstüne koyun.
- Son öğeyi BreadcrumbPage yapın; link olmasın.
- Uzun yollarda ortayı BreadcrumbEllipsis ile daraltın.
- Ayırıcıyı değiştirecekseniz tek tek değil, Breadcrumb'ın separator prop'uyla değiştirin.

**Yapmayın:**

- Yolu uygulamanın adıyla başlatmayın.
- Linkleri elle / ile birleştirmeyin.
- Bölümler arası geçiş için kullanmayın; o iş Page Nav'in.

## Erişilebilirlik

- Yol, `aria-label="Sayfa yolu"` taşıyan bir `nav` öğesidir; başka bir dilde `aria-label` ile yeniden adlandırabilirsiniz.
- Son öğe (`BreadcrumbPage`) `aria-current="page"` taşır ve tıklanamaz.
- Ayırıcılar ve `BreadcrumbEllipsis` ekran okuyuculardan gizlenir; gizlenen adımları menü veya drawer ile erişilebilir tutun.

## API

### `Breadcrumb`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `separator` | `React.ReactNode` | `null` | Yoldaki her öğenin arasındaki işaret, örn. <SlashIcon />. Burada değiştirdiğinizde tüm ayırıcılar uyar. Varsayılan ok başıdır. |

### `BreadcrumbLink`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | <a> yerine child'ı (örn. next/link) çizer ve stilleri onun üzerine birleştirir. |

### Diğer parçalar

| Parça | Ne yapar |
| --- | --- |
| `BreadcrumbList` | Yolun öğelerini sıralayan liste. |
| `BreadcrumbItem` | Yoldaki tek adım. |
| `BreadcrumbPage` | Mevcut sayfa: son öğe, link değildir. |
| `BreadcrumbSeparator` | Adımlar arasındaki ayırıcı. Children verirseniz yalnızca bu ayırıcı değişir. |
| `BreadcrumbEllipsis` | Daraltılan adımların yerini tutar; listelemek için bir `DropdownMenuTrigger` içine koyun. |