by DIGICORP

  • slideshowGet Started
  • layers Style
    • Typography
    • Icons
    • Shadow
  • Propeller Components
    • Accordion
    • Alert
    • Badge
    • Button
    • Modal
    • Dropdown
    • Form
    • List
    • Navbar
    • Popover
    • Progressbar
    • Sidebar
    • Tab
    • Table
    • Tooltip
    • Card
    • Floating Action Button
  • swap_callsThird Party Components
    • Custom Scrollbar
    • Data Table
    • Datetimepicker
    • Range Slider
    • Select2
  • webStarter Templates
menu

  • UI Framework

    Download Zip
  • Standalone

    Download ZIP
Get Propeller
  • Open Source
  • Pro
  • Angular
Dropdown

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

Bootstrap Dropdown Propeller Dropdown Dropdown with Directions Dropdown with Hover event Configuration Options Events

Bootstrap Dropdown

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

code
  • HTML
  • CSS
  • JS
 
							

							

							
Dropdown trigger
  • Action
  • Another action
  • Something else here
  • Separated link

Propeller Dropdown

Propeller Dropdown consists of Bootstrap HTML structure with Propeller customized classes based on material design standards.

Types - Based on the type of content, Propeller Dropdown can be categorized into three types: with header, with divider, and with disabled links.

code
  • HTML
  • CSS
  • JS
 
							

							

							
  • Dropdown header
  • Action
  • Another action
  • Something else here
  • Dropdown header
  • Separated link
  • Action
  • Another action
  • Something else here
  • Separated link
  • Regular link
  • Disabled link
  • Another link

Dropdown with Directions

Dropdown can start from different directions such as from bottom left, bottom right, top left, top right. Add .dropdown-menu-right to make the dropdown open from bottom-right, .pmd-dropdown-menu-top-left to make the dropdown open from top-left and .pmd-dropdown-menu-top-right to make the dropdown open from top-right.

code
  • HTML
  • CSS
  • JS
 
							
 
							
 
							

Bottom Left Direction

  • Dropdown header
  • Action
  • Another action
  • Something else here
  • Dropdown header
  • Separated link

Bottom Right Direction

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

Top Left Direction

  • Regular link
  • Disabled link
  • Another link

Top Right Direction

  • Regular link
  • Disabled link
  • Another link

Dropdown with Hover event

In this case, we are showing the dropdown on the hover of a particular button. In order to open the dropdown on hover, add .pmd-dropdown-hover to the button.

code
  • HTML
  • CSS
  • JS
 
							

							

							

Hover with header

  • Dropdown header
  • Action
  • Another action
  • Something else here
  • Dropdown header
  • Separated link

Hover with divider

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

Hover with disabled menu items

  • Regular link
  • Disabled link
  • Another link

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
.dropdown-menu Used to create a dropdown menu. Required
.dropdown-menu-right Used when you want the dropdown menu to open from bottom right. Optional
.pmd-dropdown-menu-top-left Used when you want the dropdown menu to open from top left. Optional
.pmd-dropdown-menu-top-right Used when you want the dropdown menu to open from top right. Optional
.dropdown-toggle Add this class to the button for open and close of the dropdown menu. Required
.pmd-dropdown-hover Add this class to the button to open the dropdown menu on hover. Optional

jQuery plugin

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


				

Bootstrap 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).

				
  • All Mail
    • Social
    • Promo
  • Trash
  • Spam
  • Follow Up
  • Propeller © All Rights Reserved.

    Licensed under MIT license.

  • Version- 1.3.2

    Download Now

  • mail_outline
    For Support

    support@propeller.in

Primary chat

Please share your information to get the download link.

person
business
work
mail_outline
Note: We will use this information to improve the Propeller experience for you. We will not share your details or spam your inbox.

Please share your information to get the download link.

person
business
work
mail_outline
Note: We will use this information to improve the Propeller experience for you. We will not share your details or spam your inbox.