Manual and custom triggers

You can easily control dropdowns programmatically using the exported dropdown instance.

Button groups and split buttons

Bootstrap split buttons and dropdowns on button groups are supported with the existing dropdown directives.

Mixed menu items and form

Container “body”

Set the container property to "body" to have the dropdown menu be appended to the body instead of where it belongs. This option is useful if the dropdown is defined inside an element that clips its contents (i.e. overflow: hidden).

1 Item
Both “Actions” table cells define an overflow hidden
Dropdown uses container "body"Default dropdown

Dynamic positioning in a navbar

By design, dropdowns are always positioned dynamically via placement except when used inside navbar elements. To gracefully display them properly on small screens, they are rendered in the html as block elements.

In order to align a dropdown in a navbar to the right while still keeping correct behavior when the navbar is collapsed, the responsive CSS classes (for example dropdown-menu-end) must be added to the dropdown menu. The second dropdown in this example illustrates it.

If completely custom placement of a dropdown in a navbar is needed, then it is only possible if the display property is explicitlyset to "dynamic". The third dropdown in this example illustrates this.

Beware however that this breaks the positioning of the dropdown when the navbar is expanded on small displays. You can see the difference between the behavior of the first dropdowns (with a static display) and the last one (with a dynamic display) if you use this demo on a small resolution.

To have dynamic positioning along with correct behavior on smaller displays, the value of the display property should be dynamically set based on the screen resolution. This is left as an exercise to the reader.

Copyright © 2021. All right reserved.

Theme Customizer

Theme Styles

Header Colors

Sidebar Backgrounds