Skip to content

Elements:Dropdowns

Setup

Dropdown functionality can be added to both a and button elements which have the .btn class.

Single Button

Action Another action Something else here

Single Link

Action Another action Something else here

Dropdown Mega Menus

Apply "mega menu" functionality by adding the class .dropdown-mega-menu to the parent of the .dropdown-toggle elements. You can use grid classes to layout the mega menu content.

Alerts Animations Badges Button Groups Buttons Cards Carousels Collapse / Accordions Colours Utils Counters Call To Action Blocks Dividers Dropdowns Forms
Forms Input Groups Icons Icons: Bootstrap Icons: Flags Icons: Font Awesome Icons: Ionicons Icons: Linearicons Icons: Line Awesome List Groups Modals Modals Onload Navs Tabbable Navs Overlays
Progress Bars Select Picker Shadows Social Media Branding Spacers Spinners Tables Toasts Tooltips & Popovers Type Effect Typography Utilities Video Blocks Page Titles

Dropdown Effects

Add .dropdown-effect-fade , .dropdown-effect-fadeup or .dropdown-effect-fadedown to any wrapper of your .dropdown-menu elements or to a single .dropdown-menu element to apply a fade effect on opening of the dropdown.

NOTE: Effects are disabled on dropdown menus shown in the mobile menus.

Dropdown Alignment

Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Dropdown headers & dividers

Dropdown header
Action Another action Something else here
Separated link

Dropdown Styles

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here
Action Another action Something else here

Dropdown Size

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here

Dropdown On Hover

To make dropdown menus show on hover instead of click simply add the attribute data-hover="dropdown" to your .dropdown-toggle elements.

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Get AppStrap
Theme Colours
Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page