dropdown

Dropdowns in Bootstrap 5 are versatile and used to display a list of links or options that appear when triggered by a button, link, or other interactive element.

Basic Dropdown:

Use .dropdown with .dropdown-menu to create a basic dropdown.

Example

Dropdown button

</button>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

</ul>

</div>

Try it yourself

Dropdown with Dividers:

Use .dropdown-divider to separate groups of items.

Example

Dropdown with Divider

</button>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><a class="dropdown-item" href="#">Separated link</a></li>

</ul>

</div>

Try it yourself

Dropdown with Headers:

Use .dropdown-header to add headers to the dropdown menu.

Example

Dropdown with Header

</button>

<li><h6 class="dropdown-header">Category 1</h6></li>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><h6 class="dropdown-header">Category 2</h6></li>

<li><a class="dropdown-item" href="#">Separated link</a></li>

</ul>

</div>

Try it yourself

Dropdown with Disabled Items:

Use .disabled to disable items in the dropdown menu.

Example

Dropdown with Disabled Item

</button>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

</ul>

</div>

Try it yourself

Alignment Options:

Align the dropdown menu to the right using .dropdown-menu-end.

Example

Right-aligned Dropdown

</button>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

</ul>

</div>

Try it yourself

Dropup Variation:

Change the direction of the dropdown to upward using .dropup.

Example

Dropup

</button>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

<li><a class="dropdown-item" href="#">Something else here</a></li>

</ul>

</div>

Try it yourself

Dropright and Dropleft:

Create dropdowns that open to the right or left using .dropright and .dropleft.

Example

Dropright

</button>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

</ul>

</div>

Dropleft

</button>

<li><a class="dropdown-item" href="#">Action</a></li>

<li><a class="dropdown-item" href="#">Another action</a></li>

</ul>

</div>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.