إنتقل إلى المحتوى الرئيسي

مسار التنقل ورابط الرجوع

ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.

مسار التنقل يُظهر موقع الصفحة في التسلسل الهرمي؛ ورابط الرجوع يعود إلى الخطوة السابقة في مسار عمل. يجيبان عن سؤالين مختلفين، لذا تستخدم الصفحة أحدهما لا كليهما.

CSS: css/components/breadcrumbs.css. الأصناف: .al-back-link، .al-breadcrumbs.

في صفحته، بالإنجليزية والعربية

البنية​

HTML
<nav class="al-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/settings">Settings</a></li>
    <li><a href="/settings/team" aria-current="page">Team</a></li>
  </ol>
</nav>

<a class="al-back-link" href="/step-2">Back</a>

الأنواع والأحجام​

مسار التنقل: سلسلة من الصفحات الأعلى تنتهي بالصفحة الحالية. ورابط الرجوع: رابط واحد إلى الخطوة السابقة.

الحالات​

تُظهر الروابط خطًا سفليًا عند التمرير؛ وتحمل الصفحة الحالية aria-current="page". والفاصل مرسوم بلغة CSS، فلا يُقرأ بصوت عالٍ أبدًا.

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

كل رابط محطة في تسلسل التنقل بمفتاح Tab. لا شيء غير ذلك.

ARIA​

عنصر <nav> باسم «Breadcrumb» (أي «مسار التنقل» في صفحة عربية)، مع قائمة مرتّبة. لا تضع الفاصل في النص.

من اليمين إلى اليسار​

يجري المسار من اليمين إلى اليسار وينعكس الفاصل؛ ويشير سهم رابط الرجوع إلى جهة البداية.

افعل ولا تفعل​

افعل
  • استخدم مسار التنقل للتسلسل الهرمي، ورابط الرجوع للخطوة السابقة في مسار عمل.
  • على الشاشات الضيقة، أبقِ الصفحة الأم والصفحة الحالية واطوِ ما بينهما؛ ولا تقتطع اسم الصفحة الحالية في منتصف كلمة أبدًا.
لا تفعل
  • استخدام مسار التنقل بوصفه التنقل الرئيسي.
  • جعل رابط الرجوع يعتمد على سجل المتصفح؛ بل اربطه بالخطوة السابقة الفعلية.

الرموز​

الرموز التي يستخدمها (6)

--al-color-text، --al-color-text-muted، --al-size-target-min، --al-space-1، --al-space-2، --al-text-sm