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: Flags Icons: Font Awesome Icons: Ionicons Icons: Linearicons List Groups Modals Modals Onload Navs
Tabbable Navs Overlays Progress Bars Social Media Branding Spacers Tables Tooltips & Popovers Type Effect Typography Utilities Video Blocks

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 Today
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