Dropdowns

Dropdown examples

You need to add data-bs-toggle="dropdown" to initialize dropdown trigger

Add .active or .disabled to items in the dropdown to style them as active or disabled

Extend .dropdown-menu with .dropdown-menu-animated to apply animation when dropdown opened

Use .dropdown-icon class with an icon inside to add an icon before the content

You can add circle bullet by using .dropdown-bullet with <i> tag

Insert header to a dropdown menu with .dropdown-header and apply the class with <h*> tag.

Dividing your dropdown items with .dropdown-divider class

Make the dropdown menu centered below or above the toggle with .{dropdown|dropup}-center on the parent element.

Change dropdown menu orientation by applying .dropstart|.dropend|.dropup classes to .dropdown elements

Apply .dropdown-menu-{start|end} to .dropdown-menu elements to change alignment

You can insert any elements into dropdown menu

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

You can insert a submenu by implementing .dropdown-submenu-menu element and it also support orientation classes .dropdown-submenu-{start|end}

Combine .dropdown-row and .dropdown-col to make the grid

© Clivax.
Crafted with by Codebucks