مسار التنقّل

Breadcrumbs

aria-current="page"

اسمه كمانفتات الخبز، شريط المسار، مسار الصفحة، دليل التسلسل، خط السير، breadcrumb trail، breadcrumb navigation، path bar، location trail

مسار التنقّل صفّ من الروابط يعرض موقع الصفحة الحالية داخل شجرة الموقع، من الجذر حتى الصفحة المعروضة. آخر عنصر فيه هو الصفحة الحالية نفسها: يُكتب عادةً بدون رابط ويُعلَّم بـ aria-current="page". والمسار يعكس التسلسل الهرمي للموقع لا تاريخ تصفّح المستخدم؛ فلو سرد الصفحات التي زارها بالترتيب صار سجلّ تصفّح لا مسار تنقّل. وهو ليس مؤشر خطوات، لأن الخطوات رحلة لها بداية ونهاية وترتيب زمني. وليس تبويبات، لأن التبويبات أشقاء في المستوى نفسه، ولا ترقيم صفحات، لأن الترقيم يتنقّل بين أجزاء متساوية من مجموعة واحدة.

لو قلت عليه…

«الروابط الصغيرة اللي فوق العنوان»«الشريط اللي بيقول الرئيسية بعدين القسم»«السهم الصغير بين أسماء الصفحات»«خط السير بتاع الموقع»«المسار اللي فيه سلاش بين الكلمات»

العيّنة الحيّة

تفاعل مع الديمو. كل الأجزاء حقيقية ومرقّمة.

RTLالسهم منعكس تلقائياً، جرّب تبديل اللغة من الأعلى

تشريح العنصر: كل جزء واسمه

مرّر على أي سطر ليتحدّد مكانه في الديمو فوق.

برومبت البناء

ابنِ مسار تنقّل (breadcrumbs) داخل <nav aria-label="مسار التنقّل">. يحتوي المسار على <ol> من المستويات، وكل مستوى <li> فيه رابط، ما عدا الأخير فهو نص بدون رابط يحمل aria-current="page". ضع بين العناصر فاصلاً زخرفياً بـ aria-hidden="true"، ونفّذه كأيقونة SVG تنعكس بـ scaleX(-1) داخل [dir="rtl"]. اجعل التباعد بـ gap لا بـ margin-right. إذا زاد عدد المستويات عن أربعة، اطوِ الأوسط في زرّ «…» يفتح المستويات المخفية، مع إبقاء الجذر والصفحة الحالية ظاهرين. لُفّ أي جزء لاتيني من العنوان بـ <bdi>. أضف بيانات BreadcrumbList المهيكلة من schema.org.

سلوكه في الاتجاه من اليمين لليسار

الجزء ده حصري عندنا.

اتجاه المسار

ينعكس

ينعكس المسار كله: الجذر (الرئيسية) يبدأ من اليمين، والصفحة الحالية تنتهي عند اليسار. ولا تستخدم margin-right للتباعد بين العناصر؛ استخدم gap أو margin-inline-start حتى ينضبط الاتجاهان بالكود نفسه.

الفاصل السهمي

ينعكس

أهم خطأ في المسار العربي هو السهم ‹›. فالحرف › إذا كُتب كنص لن ينعكس تلقائياً وسيشير في الاتجاه الخطأ. عالجه بأيقونة SVG مع transform: scaleX(-1) داخل [dir="rtl"]، أو بفاصل محايد الاتجاه مثل / أو النقطة ·، أو بالحرف العربي المناسب ‹ مباشرة.

الأسماء اللاتينية داخل مسار عربي

لا ينعكس

مسار مثل «الرئيسية / لوحة التحكم / users / admin-panel» ينكسر ترتيبه بصرياً بسبب خوارزمية الـ bidi. لُفّ كل جزء لاتيني بـ <bdi> أو بـ span يحمل dir="ltr" و unicode-bidi: isolate. والقاعدة نفسها تنطبق على الأرقام والمعرّفات مثل #1042.

الطيّ والقصّ

ينعكس

يقصّ text-overflow: ellipsis من الطرف النهائي منطقياً، أي الطرف الأيسر في العربية، وهو السلوك الصحيح. لكن إذا ضبطت العرض بقيم padding-left/right ثابتة اختلّ التوازن عند الانعكاس، فاستخدم padding-inline.

أسماؤه في الكود

كل سطر هو كلمة مكتبة واحدة عن نفس الشيء. خد السطر اللي بيكلّم مشروعك.

ARIAaria-current="page"يوضع على العنصر الأخير وحده، وهو الصفحة الحالية.

HTML<nav aria-label> + <ol>منطقة تنقّل مسمّاة تضمّ قائمة مرتّبة، لأن للترتيب معنى.

Material UI<Breadcrumbs separator="›" maxItems={4}>الطيّ التلقائي عبر maxItems و itemsBeforeCollapse.

Ant Design<Breadcrumb items={items} />كل عنصر كائن فيه title و href، والفاصل يُضبط بـ separator.

shadcn/ui<Breadcrumb><BreadcrumbList>…أجزاء مركّبة: BreadcrumbItem و BreadcrumbLink و BreadcrumbSeparator و BreadcrumbPage و BreadcrumbEllipsis.

schema.orgBreadcrumbListالبيانات المهيكلة التي تجعل جوجل يعرض المسار مكان الرابط في نتيجة البحث.

CSS[dir="rtl"] .sep { transform: scaleX(-1) }الطريقة العملية لعكس السهم مع انعكاس الصفحة.

شوف كمان

ويبمؤشّر الخطوات ويبالإشعار العائم

آخر تحديث · 2026-08-19