nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Breadcrumb

نمای کلی
۹ اکسپورت۳ محور واریانت۱۴ پراپ۴ فایل
import { Breadcrumb, BreadcrumbDivider } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

پایه

یک لندمارک nav که رشته‌ای از لینک‌ها را نگه می‌دارد. آخرین دانه را current کنید: به‌جای لینک به‌صورت متن رندر می‌شود و aria-current="page" می‌گیرد.

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>
  )
}

جداکننده‌ها

سه جداکننده‌ی آماده، یا با separator کاملاً جایگزینشان کنید. جداکننده تزئینی است و از فناوری کمکی پنهان می‌ماند — ساختار فهرست است که تودرتویی را می‌رساند.

arrow
slash
dot
جداکننده‌ی سفارشی
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>
    </>
  )
}

آیکون‌ها

icon یک نشان پیشرو اضافه می‌کند. برای دانه‌ی فقط‌آیکون — دکمه‌ی خانه در ابتدای مسیر — آیکون را به‌عنوان فرزند بدهید و به لینک یک aria-label.

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>
  )
}

جمع‌کردن مسیرهای بلند

maxItems وسط مسیر را در یک سه‌نقطه جمع می‌کند و اولین دانه و itemsAfterCollapse تای آخر را نگه می‌دارد. مسیر پنج‌سطحی روی موبایل یا می‌شکند یا اسکرول می‌خورد، و هیچ‌کدام خوب نیست.

مسیر کامل
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>
  )
}

لینک‌های روتر

asChild المان خودتان را به‌جای <a> رندر می‌کند، پس لینک Next.js یا React Router ناوبری سمت‌کلاینت را نگه می‌دارد و در عین حال استایل و سیم‌کشی ARIA دانه را هم می‌گیرد.

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>
  )
}