Breadcrumb

مسار روابط من جذر الموقع إلى الصفحة الحالية.

المتصفحات: Chrome 123+Firefox 121+Safari 17.5+
الفئة: 0
الحجم المضغوط: 1.12 kB
ميزانية التخطيط القسري: 0 ms
ميزانية axe: 0
متوافق مع SSR: نعم
مبني على: elements/details
العقد المنشور: بيئة الاختبار

المختبر

Breadcrumb

React

CSS

Tailwind

import { Breadcrumb } from "@gunkin/uiify";

export default function Example() {
  return (
    <Breadcrumb.Root className="">
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link current>Components</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

@layer components {
  [data-uiify-breadcrumb] [data-part="list"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  [data-uiify-breadcrumb] [data-part="item"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  [data-uiify-breadcrumb] [data-part="link"] {
    color: var(--primary);
    text-decoration: none;
  }

  [data-uiify-breadcrumb] [data-part="link"]:hover {
    text-decoration: underline;
  }

  [data-uiify-breadcrumb] [aria-hidden="true"] {
    color: var(--muted-foreground);
  }

  [data-uiify-breadcrumb] [data-current] {
    color: var(--foreground);
    font-weight: 600;
  }
}

import { Breadcrumb } from "@gunkin/uiify";

export default function Example() {
  return (
    <Breadcrumb.Root
      className="
        [&_[data-part=list]]:flex [&_[data-part=list]]:flex-wrap [&_[data-part=list]]:items-center
        [&_[data-part=list]]:[gap:0.5rem] [&_[data-part=list]]:list-none [&_[data-part=list]]:p-0
        [&_[data-part=list]]:m-0 [&_[data-part=item]]:flex [&_[data-part=item]]:items-center
        [&_[data-part=item]]:[gap:0.5rem] [&_[data-part=link]:where(:not([data-current]))]:text-primary
        [&_[data-part=link]]:no-underline [&_[data-part=link]:hover]:underline
        [&_[aria-hidden=true]]:text-muted-foreground [&_[data-current]]:text-foreground
        [&_[data-current]]:[font-weight:600]
      "
    >
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
          <Breadcrumb.Separator />
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <Breadcrumb.Link current>Components</Breadcrumb.Link>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb.Root>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[&_[data-part=list]]:flex [&_[data-part=list]]:flex-wrap [&_[data-part=list]]:items-center [&_[data-part=list]]:[gap:0.5rem] [&_[data-part=list]]:list-none [&_[data-part=list]]:p-0 [&_[data-part=list]]:m-0 [&_[data-part=item]]:flex [&_[data-part=item]]:items-center [&_[data-part=item]]:[gap:0.5rem] [&_[data-part=link]:where(:not([data-current]))]:text-primary [&_[data-part=link]]:no-underline [&_[data-part=link]:hover]:underline [&_[aria-hidden=true]]:text-muted-foreground [&_[data-current]]:text-foreground [&_[data-current]]:[font-weight:600]');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

API

`Breadcrumb.Root`

الخاصية	النوع	افتراضي	الوصف
`aria-label`	`string`	`"Breadcrumb"`	اسم مَعلم التنقل للتقنيات المساعدة.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

`Breadcrumb.List`

الخاصية	النوع	افتراضي	الوصف
`children`	`ReactNode`	—	عناصر مسار الصفحة المكتوبة يدويًا، كبديل لـ items.
`items`	`BreadcrumbItemData[]`	—	مدخلات قائمة على البيانات، لكل منها مفتاح وتسمية وhref اختياري وعلامة current؛ مطلوبة عند تعيين maxItems.
`itemsAfterCollapse`	`number`	`1`	عدد العناصر الأخيرة التي تظل مرئية عند طي المسار.
`itemsBeforeCollapse`	`number`	`1`	عدد العناصر الأولى التي تظل مرئية عند طي المسار.
`maxItems`	`number`	—	عدد العناصر الذي يؤدي تجاوزه إلى طي وسط المسار خلف علامة حذف قابلة للتوسيع.
`separator`	`ReactNode`	—	محتوى يُعرض بين العناصر حين تُبنى القائمة من items.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

`Breadcrumb.Item`

الخاصية	النوع	افتراضي	الوصف
`children`	`ReactNode`	—	محتوى عنصر واحد في قائمة مسار الصفحة.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

`Breadcrumb.Link`

الخاصية	النوع	افتراضي	الوصف
`children`	`ReactNode`	—	تسمية الرابط.
`current`	`boolean`	`false`	يعلّم هذا المدخل كالصفحة الحالية ويعيّن aria-current عليه.
`href`	`string`	—	وجهة الرابط؛ احذفها لعرض مدخل لا ينتقل إلى وجهة.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

`Breadcrumb.Separator`

الخاصية	النوع	افتراضي	الوصف
`children`	`ReactNode`	`"/"`	محتوى الفاصل، ويُخفى عن التقنيات المساعدة.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	استبدل العنصر المعروض مع الحفاظ على توصيلات السلوك وإمكانية الوصول.

`Breadcrumb.Ellipsis`

الخاصية	النوع	افتراضي	الوصف

لوحة المفاتيح

المفتاح	الإجراء
`Tab`	نقل التركيز إلى عنصر التحكم أو منه
`Enter` / `Space`	التفعيل عند التركيز (لعناصر التحكم الشبيهة بالأزرار)

إمكانية الوصول

يستخدم HTML الدلالي متى أمكن. افحص بنية HTML المعروضة في المختبر؛ لا تُضاف ARIA إلا حين لا تكفي العناصر الأصلية.

نقاط التنسيق

data-disabled

إطار العمل

التنسيق

المظهر

اللغة

Breadcrumb

المختبر

Breadcrumb

API

`Breadcrumb.Root`

`Breadcrumb.List`

`Breadcrumb.Item`

`Breadcrumb.Link`

`Breadcrumb.Separator`

`Breadcrumb.Ellipsis`

لوحة المفاتيح

إمكانية الوصول

نقاط التنسيق