nili/ui
enfaartr
كل المكوّنات

Breadcrumb

عرض شامل
٩ تصدير٣ محور تنويع١٤ خاصيّة٤ ملف
import { Breadcrumb, BreadcrumbDivider } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

أساسي

معلم تنقّل يحمل سلسلة روابط. علّم آخر عنصر بـ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>
  )
}