القوائم المنسدلة (Dropdowns)

1. القائمة المنسدلة الأساسية (Basic Dropdown)

زر يفتح قائمة تحتوي على روابط وخط فاصل.

المعاينة

dropdown: الحاوية الأم التي تضم الزر والقائمة، وهي ضرورية لضبط تموضع القائمة.
dropdown-toggle: يضاف للزر ليقوم برسم السهم الصغير المتجه للأسفل تلقائياً.
data-bs-toggle="dropdown": الكود الأهم؛ يخبر الجافاسكربت أن هذا الزر وظيفته فتح قائمة.
dropdown-menu: حاوية القائمة نفسها (مخفية افتراضياً).
dropdown-item: يضاف لكل رابط داخل القائمة ليعطيه مساحة التبطين ولون الخلفية عند التمرير.
dropdown-divider: كلاس مخصص لـ <hr> لرسم خط فاصل أنيق بين العناصر.

زر مزدوج، النصف الأيمن يقوم بإجراء مباشر، والنصف الأيسر يفتح القائمة (أو العكس في الإنجليزي).

المعاينة

يجب استخدام btn-group (مجموعة الأزرار) للحاوية ليتم التصاق الزرين ببعضهما وتوحيد الحواف.
الزر الأول هو زر عادي (بدون data-bs-toggle) لكي يقوم بوظيفة منفصلة.
الزر الثاني نضع فيه dropdown-toggle-split: هذا الكلاس يزيل المسافات الجانبية للزر ويجعله مناسباً بحجم السهم فقط.

إذا كان موقعك فاتحاً ولكنك تريد القائمة المنسدلة فقط داكنة.

المعاينة

dropdown-menu-dark: تُضاف إلى عنصر <ul> لتحويل خلفية القائمة للون الرمادي الغامق جداً، وتغيير ألوان الروابط إلى الأبيض الفاتح لضمان مقروئيتها.
تستخدم كثيراً في المواقع الفاتحة لتمييز القوائم، أو في شريط الـ Navbar الداكن لكي تتناسق القائمة مع لونه.

تحريك اتجاه ظهور القائمة (لأعلى، يمين، يسار) بدلاً من الأسفل.

المعاينة

نستبدل كلاس الحاوية dropdown بواحد من الكلاسات التالية:
dropup: تفتح القائمة للأعلى (مهمة إذا كان الزر في أسفل الشاشة، مثل الـ Footer). وتتغير أيقونة السهم للأعلى تلقائياً!
dropend: تفتح في جهة نهاية النص (لليسار في العربي، لليمين في الإنجليزي).
dropstart: تفتح في جهة بداية النص.