شريط التنقل Navbar في بوتستراب 5Bootstrap 5 Navbar

يضطلع الشريط العلوي الرئيسي في تطبيقات الويب الحديثة بمهمة مزدوجة: جمع شعار الموقع والروابط والقوائم المنسدلة وحقل البحث في سطر متناسق على الشاشات العريضة، وطيّها بأناقة على شاشات الهواتف. يتكفل مكوّن .navbar في بوتستراب 5 بهذه الهندسة المتجاوبة اعتماداً على الصندوق المرن.

يتألف كل شريط متجاوب من ثلاث طبقات متداخلة: وسم دلالي خارجي <nav class="navbar navbar-expand-lg bg-body-tertiary">، يليه غلاف داخلي .container أو .container-fluid لضبط الهوامش الجانبية، ثم عناصر الهوية والروابط بالداخل؛ حيث يحدد .navbar-expand-lg نقطة التوقف 992px لفرد القائمة أفقياً.

ينسّق الكلاس .navbar-brand اسم الموقع أو شعاره بحجم خط متوازن ومنع تلقائي لالتفاف السطر. ويمكن تطبيقه على رابط <a> يقود للصفحة الرئيسية، أو على وسم نصي <span class="navbar-brand mb-0 h1"> في لوحات الأدوات المستقلة.

وعند دمج صورة شعار بجانب اسم العلامة، أضف الكلاسات d-inline-block align-text-top me-2 مع تحديد سمتي width وheight صراحةً على وسم <img> ليحجز المتصفح أبعاد الصورة فوراً ويمنع اهتزاز التخطيط أثناء التحميل.

تُبنى قائمة الروابط داخل الشريط عبر الكلاس .navbar-nav، وهو نسخة مخصصة تتراص عمودياً على الهاتف ثم تنفرد أفقياً تلقائياً عند بلوغ نقطة التوقف المحددة في .navbar-expand-*، كما تقبل تضمين القوائم المنسدلة عبر <li class="nav-item dropdown">.

ولتوزيع العناصر على طرفي الشريط، اعتمد الهوامش المنطقية الحديثة في بوتستراب 5: يدفع .me-auto العناصر التالية نحو نهاية السطر المنطقية بديلاً عن الكلاسات القديمة المُلغاة، بينما يجمع form.d-flex حقل البحث وزر الإرسال في صف متناسق، وينسق .navbar-text العبارات النصية القصيرة.

كانت الإصدارات السابقة تتطلب إرفاق كلاس خاص لتلوين نصوص الشريط الداكن، أما في بوتستراب 5.3 فقد أُحيل الكلاس القديم للتقاعد وحلّت محله السمة الموحدة الحديثة data-bs-theme="dark".

بمجرد وضع data-bs-theme="dark" على شريط يحمل خلفية داكنة مثل .bg-dark أو .bg-primary، تتحول نصوص الشعار والروابط وأيقونة زر الهاتف وحتى القوائم المنسدلة بداخله تلقائياً إلى تباين فاتح واضح.

تحت نقطة التوقف المحددة، يخفي الإطار حاوية .collapse.navbar-collapse ويُظهر زر القائمة الثلاثية .navbar-toggler تلقائياً. ويتم ربطهما معاً تصريحياً دون كتابة سطر جافاسكريبت واحد:

• إسناد data-bs-toggle="collapse" وdata-bs-target="#mainNav" إلى الزر <button class="navbar-toggler" type="button">.
• إضافة ثلاثية الإتاحة aria-controls="mainNav" وaria-expanded="false" وaria-label="Toggle navigation" لأن أيقونة الخطوط الثلاثية خالية من النص المقروء.

بدلاً من دفع محتوى الصفحة للأسفل عند فتح قائمة الهاتف التقليدية، تفضل تطبيقات الويب العصرية إظهار درج جانبي منزلق مع طبقة تعتيم خلفية؛ ويدعم بوتستراب 5 دمج مكوّن .offcanvas مباشرةً داخل شريط التنقل.

وجّه زر الهاتف عبر data-bs-toggle="offcanvas" نحو data-bs-target="#navDrawer"، وضع الروابط داخل حاوية <div class="offcanvas offcanvas-end" tabindex="-1" id="navDrawer"> مزودة برأس وزر إغلاق وجسم. ومع وجود .navbar-expand-lg يعمل الدرج كقائمة منزلقة على الجوال ثم يندمج كصف أفقي طبيعي على الحاسوب تلقائياً.

يتيح بوتستراب ثلاث أدوات تموضع لإبقاء شريط التنقل في متناول اليد أثناء التمرير الطويل، مع فرق جوهري في السلوك التخطيطي:

• الإلصاق الذكي .sticky-top — يعمل بخاصية position: sticky فيحتفظ بحيزه الطبيعي في تدفق الصفحة ولا يحجب السطر الأول من المحتوى مطلقاً.
• التثبيت المطلق .fixed-top و.fixed-bottom — ينزع الشريط من التدفق الطبيعي للصفحة، لذا يلزم تعويض ارتفاعه بإضافة حشو مقابل على body مثل padding-top: 4.5rem حتى لا يختفي المحتوى خلفه.