nili/ui
enfaartr
Tüm bileşenler

Breadcrumb

Genel görünüm
9 export3 varyant ekseni14 prop4 dosya
import { Breadcrumb, BreadcrumbDivider } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Temel

Bir bağlantı izini tutan nav işareti. Son kırıntıyı current işaretleyin: bağlantı yerine metin olarak çizilir ve aria-current="page" taşır.

import { Breadcrumb, BreadcrumbItem } from "@nili/ui"

export function Example() {
  return (
    <Breadcrumb label={t('nav.label')}>
      <BreadcrumbItem href="#">{t('crumb.home')}</BreadcrumbItem>
      <BreadcrumbItem href="#">{t('crumb.projects')}</BreadcrumbItem>
      <BreadcrumbItem href="#">Nili</BreadcrumbItem>
      <BreadcrumbItem current>{t('crumb.components')}</BreadcrumbItem>
    </Breadcrumb>
  )
}

Ayraçlar

Üç hazır ayraç ya da separator ile tamamen değiştirin. Ayraç süstür ve yardımcı teknolojiden gizlenir — iç içeliği liste yapısı taşır.

arrow
slash
dot
özel ayraç
import { Breadcrumb, BreadcrumbItem } from "@nili/ui"

export function Example() {
  return (
    <>
      <Breadcrumb divider="arrow" label={t('nav.label')}>…</Breadcrumb>
      <Breadcrumb divider="slash" label={t('nav.label')}>…</Breadcrumb>
      <Breadcrumb divider="dot" label={t('nav.label')}>…</Breadcrumb>

      {/* anything you like */}
      <Breadcrumb separator={<span aria-hidden>→</span>} label={t('nav.label')}>…</Breadcrumb>
    </>
  )
}

Simgeler

icon önde bir simge ekler. Yalnızca simgeli bir kırıntı için — izin başındaki ana sayfa düğmesi — simgeyi çocuk olarak geçin ve bağlantıya bir aria-label verin.

import { Breadcrumb, BreadcrumbItem, Icon } from "@nili/ui"
import { RiHomeLine, RiFolderLine } from "@remixicon/react"

export function Example() {
  return (
    <Breadcrumb label={t('nav.label')}>
      <BreadcrumbItem href="#" aria-label={t('crumb.home')}>
        <Icon icon={RiHomeLine} />
      </BreadcrumbItem>
      <BreadcrumbItem href="#" icon={<Icon icon={RiFolderLine} />}>
        Projects
      </BreadcrumbItem>
      <BreadcrumbItem current>Nili</BreadcrumbItem>
    </Breadcrumb>
  )
}

Uzun izleri katlamak

maxItems ortayı üç noktaya katlar; ilk kırıntıyı ve son itemsAfterCollapse kadarını tutar. Telefonda beş düzeyli bir yol ya satır kırar ya kaydırılır, ikisi de iyi değildir.

tam iz
maxItems=3
import { Breadcrumb, BreadcrumbItem } from "@nili/ui"

export function Example() {
  return (
    <Breadcrumb maxItems={3} itemsAfterCollapse={1} label={t('nav.label')}>
      <BreadcrumbItem href="#">{t('crumb.home')}</BreadcrumbItem>
      <BreadcrumbItem href="#">{t('crumb.projects')}</BreadcrumbItem>
      <BreadcrumbItem href="#">Nili</BreadcrumbItem>
      <BreadcrumbItem href="#">{t('crumb.components')}</BreadcrumbItem>
      <BreadcrumbItem current>{t('nav.label')}</BreadcrumbItem>
    </Breadcrumb>
  )
}

Yönlendirici bağlantıları

asChild <a> yerine sizin öğenizi çizer; böylece bir Next.js ya da React Router bağlantısı istemci tarafı gezinmeyi korur ve yine de kırıntı stilini ve ARIA bağlantılarını alır.

import Link from "next/link"
import { Breadcrumb, BreadcrumbItem } from "@nili/ui"

export function Example() {
  return (
    <Breadcrumb label={t('nav.label')}>
      <BreadcrumbItem asChild>
        <Link href="/">Home</Link>
      </BreadcrumbItem>
      <BreadcrumbItem asChild>
        <Link href="/components">Components</Link>
      </BreadcrumbItem>
      <BreadcrumbItem current>{t('nav.label')}</BreadcrumbItem>
    </Breadcrumb>
  )
}