• slideshow Get Started
  • layers
    Style
    • Typography
    • Icons
    • Shadow
  • Propeller Components
    • Accordion
    • Alert
    • Badge
    • Breadcrumb
    • Button
    • Card
    • Card Examples
    • Checkbox
    • Chip
    • Dropdown
    • Floating Action Button
    • File Input
    • Form
    • Input Group
    • List
    • Modal
    • Navbar
    • Pagination
    • Popover
    • Progressbar
    • Radio Button
    • Select
    • Sidebar
    • Slider
    • Spinner
    • Stepper
    • Toggle Switch
    • Tab
    • Table
    • Text Fields
    • Tooltip
  • swap_calls Third Party Components
    • Data Table
    • Datetimepicker
    • Range Slider
    • Select2
    • Carousel
    • Rating
    • jQuery Validation
    • Calendar
  • view_quilt UI Sections
    • Intro Section
    • Footer Section
    • Contact Section
  • Created by Hea Poh Linfrom the Noun Project Migration
  • new_releases Release Notes
    • V1.1.0
    • V1.2.0
    • V1.3.0
    • V1.4.0
    • V1.4.1
    • V1.5.0
    • V1.6.0
menu
  • Pricing
  • Themes
  • Blog
    Open Source Pro Angular

Dropdown

Bootstrap 4 Dropdown with Material Design UI

Dropdown is an HTML component that allows the user to choose one value from a list. It is similar to the select box.

Bootstrap 4 Dropdown Propeller Dropdown Dropdown With Header Dropdown With Divider Dropdown With Disabled Link Right Aligned Dropdown Menu Dropdown on Hover Dropup Variation Dropleft Variation Dropright Variation Dropdown with Icon Dropdown With Form Configuration Options Methods Events

Bootstrap 4 Dropdown

Dropdown is toggleable, contextual overlay for displaying lists of links and more. It is made interactive with the included Bootstrap 4 dropdown JavaScript plugin.

Action Another action Something else here
 
                            

Propeller Dropdown

Propeller Dropdown consists of Bootstrap 4 HTML structure with Propeller customized classes. Add .pmd-dropdown followed by .dropdown to apply material design standards to it.

Action Another action Something else here

                            

Dropdown with Header

Create a dropdown with header by adding .dropdown-header class to the heading tags.

Dropdown header
Action Another action Something else here

                            

Dropdown With Divider

Add class .dropdown-divider to a <div> to create a divider in the dropdown to divides the sub menus.

Action Another action Something else here
Separated link

                            

Dropdown With Disabled Link

Add .disabled to make a link disabled.

Action Another action Something else here
Separated link

                            

Right Aligned Dropdown Menu

Add .dropdown-menu-right followed by .dropdown-menu to make the dropdown open from bottom-right.

Action Another action Something else here
Separated link

                            

Dropdown on Hover

We are using jQuery Plugin To Toggle Bootstrap Dropdowns On Hover to open the dropdown on hover.

After including the Javascript file, use the following code to initialize the function for Bootstrap Dropdown on Hover.

                            

Add .dropdown-hover class followed by .dropdown-toggle to make the dropdown open on hover.

Action Another action Something else here
Separated link

                            

Dropup Variation

Dropdown can start from the top. Add .dropup class followed by .dropdown to make the dropdown open from top-right and top-left direction.

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

                            

Dropleft Variation

To trigger a dropdown from the left of an element, add .dropleft followed by .pmd-dropdown class.

Dropdown header
Action Another action Something else here
Dropdown header
Action Another action Something else here

                            

Dropright Variation

To trigger a dropdown from the right of an element, add .dropright followed by .pmd-dropdown class.

Dropdown header
Action Another action Something else here
Dropdown header
Action Another action Something else here

                            

Dropdown with Icon

Dropdown with Icons can be used in tables and menus to show additional functionalities

Dropdown header
Action Another action Something else here
Dropdown header
Action Another action Something else here
Dropdown header
Action Another action Something else here
Dropdown header
Action Another action Something else here

                            

Dropdown Form

Dropdown forms are used to add Registration or Login Forms as a dropdown menu in the main menu.

Sign In Below

perm_identity
https
Forgot Password

                            

Configuration Options

The Propeller CSS classes apply various predefined visual enhancements to the dropdown. The table lists the available classes and their effects.

Propeller Class Effect Remark
.pmd-dropdown Used to create a dropdown menu. Required

jQuery plugin

Call the jQuery plugin to initialize the dropdown while fetching the data dynamically.


                        

Bootstrap 4 Methods

See here for more documentation on this.

Method Description
$().dropdown('toggle') Toggles the dropdown menu of a given navbar or tabbed navigation.
$().dropdown('update') Updates the position of an element’s dropdown.
$().dropdown('dispose') Destroys an element’s dropdown.

                        

Bootstrap 4 Events

All dropdown events are fired at the .dropdown-menu's parent element. All dropdown events have a relatedTarget property, whose value is the toggling anchor element. See here for more documentation on this.

Event Type Description
show.bs.dropdown This event fires immediately when the show instance method is called.
shown.bs.dropdown This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdown This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

                        
Bootstrap 4 Dropdown Propeller Dropdown Dropdown With Header Dropdown With Divider Dropdown With Disabled Link Right Aligned Dropdown Menu Dropdown on Hover Dropup Variation Dropleft Variation Dropright Variation Dropdown with Icon Dropdown With Form Configuration Options Methods Events
  • All Mail
    • Social
    • Promo
  • Trash
  • Spam
  • Follow Up
  • Propeller © All Rights Reserved.

    Licensed under Propeller Pro Developer License

  • mail_outline
    For Support

    proprosupport@propeller.in

Primary chat