> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# مسار التنقّل

> اعرض موقع الصفحة باستخدام مسار من روابط العناصر الأصلية.

## نظرة عامة

`Breadcrumb` يعرض مسار تنقل مرتبًا. يتضمن فواصل زخرفية، وأنماط تركيز الروابط، واقتطاع تسمية العنصر الأخير. تحافظ العناصر على سلوك الارتساء الأصلي وتدعم التوجيه المخصص عبر `render`. يستخدم مسار التنقل وزن خط متوسطًا بشكل متسق، بما في ذلك داخل العناوين ذات الوزن المختلف.

**Light**

[مثال على Breadcrumb (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على Breadcrumb (dark)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/primitives-navigation-breadcrumb--display)

## استخدام

مرّر العناصر بترتيب من العنصر الأصل إلى الحالي. يكون الاسم المتاح لمعلم التنقل افتراضيًا هو `Breadcrumb`؛ استخدم `aria-label` لترجمته أو لتمييز مسارات متعددة. يكون العنصر الأخير افتراضيًا هو `aria-current="page"`، سواء أكان له وجهة أم يعرض نصًا عاديًا.

```tsx theme={null}
import { Breadcrumb } from 'twenty-ui/primitives/navigation';

export const CompanyBreadcrumb = () => (
  <Breadcrumb
    aria-label="Breadcrumb"
    links={[
      { children: 'Home', href: '/' },
      { children: 'Companies', href: '/companies' },
      { children: 'Acme' },
    ]}
  />
);
```

تستخدم العناصر التي تحتوي على `href` مراسي أصلية. تتحول العناصر التي لا وجهة لها إلى نص افتراضيا. تكون الفواصل `/` للزينة، ومخفية عن التقنية المساعدة، وخارج الأسماء المتاحة للروابط. تتبع الروابط سلوك Tab وEnter المعتاد في المتصفح، بما في ذلك النقرات مع المفاتيح المعدلة والفتح في علامة تبويب جديدة.

## خصائص العنصر الأصلية

يقبل كل عنصر سمات الرابط الأصلية، ومعالجات الأحداث، و`className`، و`style`، و`ref`. على سبيل المثال، مرر `target` و`rel` لعلامة تبويب جديدة، و`download` لملف، أو `referrerPolicy` للتحكم في الطلب. يصل ref الخاص بالعنصر إلى عنصر DOM المعروض.

```tsx theme={null}
import { Breadcrumb } from 'twenty-ui/primitives/navigation';

export const ReferenceBreadcrumb = () => (
  <Breadcrumb
    aria-label="Reference location"
    links={[
      {
        children: 'Documentation',
        href: 'https://docs.twenty.com',
        target: '_blank',
        rel: 'noopener noreferrer',
        referrerPolicy: 'no-referrer',
      },
      { children: 'Companies' },
    ]}
  />
);
```

## الصفحة الحالية

تكون لقيمة `aria-current` الصريحة في عنصر أولوية على موضعه. استخدم `aria-current="page"` في عنصر آخر و`aria-current={false}` في العنصر الأخير عندما تكون الصفحة الحالية في موضع سابق ضمن المسار. يتم أيضا الاحتفاظ بقيم العناصر الحالية الأصلية الأخرى، مثل `step`. تأكد من أن العنصر المقصود فقط هو الحالي.

```tsx theme={null}
import { Breadcrumb } from 'twenty-ui/primitives/navigation';

export const CompanyContextBreadcrumb = () => (
  <Breadcrumb
    links={[
      { children: 'Home', href: '/' },
      {
        children: 'Companies',
        href: '/companies',
        'aria-current': 'page',
      },
      { children: 'Acme', 'aria-current': false },
    ]}
  />
);
```

## روابط الموجّه

استخدم الخاصية `render` للعنصر لتوفير مكوّن الرابط الخاص بموجّهك، إلى جانب `href`. مرر الوجهات والحالة وخيارات السجل الخاصة بالموجّه مباشرة إلى ذلك المكوّن. يقبل `render` إما عنصرا أو دالة تتلقى الخصائص المقدمة، بما في ذلك سمات الرابط الأصلية وref الخاص به.

يجب أن يمرّر الرابط المعروض الخصائص وref المزوّدين إلى عنصر الارتساء الخاص به. حافظ على سلوك الرابط الأصلي عند معالجة التنقل، بما في ذلك النقرات مع المفاتيح المعدلة وعلامات التبويب الجديدة. راجع [المكوّنات المخصصة](https://docs.twenty.com/ar/ui/primitives/overview#custom-components) لمعرفة متطلبات التركيب.

يختار التطبيق الوجهات ويقرر متى يعرض إجراء الرجوع على الأجهزة المحمولة. لا يستنتج `Breadcrumb` المسارات ولا يطوي العناصر الأصلية في قائمة.

## تسميات طويلة

يتقلص العنصر الأخير ويقتطع مع علامة حذف عندما تكون مساحة الحاوية محدودة. تحتفظ العناصر الأصلية بعرضها. تصبح التسميات النصية العادية تلميح أداة المتصفح الأصلي تلقائيًا. استخدم `title` لتجاوز ذلك النص أو لتوفير تلميح أداة للمحتوى الغني. اضبط `title=""` لمنع تلميح الأداة التلقائي.

**Light**

[Breadcrumb مع تسمية طويلة للصفحة الحالية (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--truncation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb مع تسمية طويلة للصفحة الحالية (dark)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--truncation\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/primitives-navigation-breadcrumb--truncation)

## محتوى غني

يمكن أن تتضمن `children` للعنصر نصًا ومحتوى مرئيًا داعمًا. حافظ على قابلية قراءة التسمية وتجنب تداخل عناصر تحكم تفاعلية داخل رابط.

**Light**

[Breadcrumb مع محتوى داعم (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rich-content\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb مع محتوى داعم (dark)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rich-content\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/primitives-navigation-breadcrumb--rich-content)

## اتجاه النص

يتبع المسار اتجاه النص المحيط. عيّن `dir="rtl"` على `Breadcrumb` أو على عنصر أصل للمحتوى من اليمين إلى اليسار. عندما تحتاج عناصر تحكم أخرى إلى سلوك مطابق للوحة المفاتيح أو المؤشر من حيث الاتجاه، اضبط أيضًا [DirectionProvider](https://docs.twenty.com/ar/ui/primitives/layout/direction-provider.md) على الاتجاه نفسه.

**Light**

[Breadcrumb في محتوى من اليمين إلى اليسار (light)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rtl\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Breadcrumb في محتوى من اليمين إلى اليسار (dark)](https://storybook.twenty.com/iframe.html?id=primitives-navigation-breadcrumb--rtl\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/primitives-navigation-breadcrumb--rtl)

## تخصيص الجذر

تصل سمات التنقل الأصلية، بما في ذلك الأسماء المتاحة و`className` و`style` ومعالجات الأحداث، إلى المعلم الجذر. يصل ref الخاص بالجذر إلى عنصر `nav` الخاص به. يقبل `render` الخاص بالجذر أيضا عنصرا أو دالة؛ حافظ على معلم التنقل ومرر الخصائص المقدمة وref الخاص به.

```tsx theme={null}
import { useRef } from 'react';
import { Breadcrumb } from 'twenty-ui/primitives/navigation';

export const HeaderBreadcrumb = () => {
  const navigationRef = useRef<HTMLElement>(null);
  const companiesRef = useRef<HTMLAnchorElement>(null);

  return (
    <Breadcrumb
      aria-label="Company location"
      ref={navigationRef}
      render={<nav data-location="header" />}
      links={[
        {
          children: 'Companies',
          href: '/companies',
          ref: companiesRef,
          render: (props) => (
            <a {...props} data-route={props.href}>
              {props.children}
            </a>
          ),
        },
        { children: 'Acme' },
      ]}
    />
  );
};
```

## الخصائص

**aria-label** `string`

Accessible navigation name. Defaults to Breadcrumb; supply a localized name or use aria-labelledby.

**className** `string`

Class merged onto the root navigation element.

**links** `BreadcrumbItem[]` *required*

Ordered trail items with native anchor attributes, event handlers, ref, children and element or callback render composition. Items with href default to anchors; other items default to text. The final item defaults to aria-current="page". An explicit aria-current value is preserved, including false.

**ref** `Ref\<HTMLElement\>`

Ref to the root nav, or the DOM element supplied through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Caller-supplied root element or renderer. Preserve the navigation landmark and forward the supplied props and ref.

**style** `CSSProperties`

Inline styles applied to the root navigation element.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.