Dropdown Basic

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Default
A basic example
Alignment
.dropdown-menu-end applies to .dropdown-menu
Dropup
.dropup replaces with .dropdown
Dropup alignment
.dropdown-menu-end applies to .dropdown-menu
No caret
.no-caret applies to .dropdown-toggle
With icon
.icon applies to .dropdown-toggle

Dropdown menu

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Header
Divider
With icon
With badge
Disabled item
.disabled applies to .dropdown-item
Active item
.active applies to .dropdown-item

أنماط متقدمة وقوائم متداخلة (Advanced Patterns & Submenus)

دعم متكامل لاختصارات لوحة المفاتيح، القوائم الفرعية، مربعات الاختيار، وخيارات الراديو الحصرية بمحاذاة منطقية كاملة.

اختصارات لوحة المفاتيح
.qhr-dropdown-shortcut للأوامر السريعة
قوائم فرعية متداخلة (Submenus)
.qhr-dropdown-sub للتفريعات متعددة المستويات
خيارات التأشير (Checkbox Items)
role="menuitemcheckbox" خيارات تفاعلية
مجموعات الراديو الحصرية (Radio Group)
role="menuitemradio" اختيار أحادي حصري

4. أنماط متقدمة (Advanced Dropdown Patterns)

الأزرار المنقسمة، بطاقات الملف التعريفي، والنمط الذهبي الفاخر

زر مجزأ (Split Button Dropdown)
إجراء رئيسي مباشر مع قائمة خيارات إضافية
قائمة المستخدم (User Profile Menu)
بطاقة رأسية مع الاسم والبريد وتفاصيل الحساب
النمط الذهبي الفاخر (Luxury Gold Dropdown)
خلفية داكنة مع تدرجات ذهبية حصرية

Dropdown Grid

Icons

Icons and title

Color icons

Color icons and title

2 cols

.cols-2 applies to .dropdown-grid

4 cols

.cols-4 applies to .dropdown-grid

Disabled item

.disabled applies to .dropdown-item

Active item

.active applies to .dropdown-item