Dropdown
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).
| # | Items | Actions | Actions |
|---|---|---|---|
| 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.