Bootstrap 5 Dropdowns – Askavy

0
21


Views:
4

A drop-down menu allows the user to choose one value from a predefined list

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">My Link 1</a></li>
      <li><a class="dropdown-item" href="#">My Link 2</a></li>
      <li><a class="dropdown-item" href="#">My Link 3</a></li>
    </ul>
  </div>

Dropdown Divider

The .dropdown-divider class is used to separate links inside the dropdown menu

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">My Link 1</a></li>
      <li><a class="dropdown-item" href="#">My Link 2</a></li>
      <li><a class="dropdown-item" href="#">MY Link 3</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">My link 4</a></li>
    </ul>
  </div>
</div>
88

Dropdown Header

The .dropdown-header class is used to add headers inside the dropdown menu

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">Header 1</h5></li>
      <li><a class="dropdown-item" href="#">My Link 1</a></li>
      <li><a class="dropdown-item" href="#">My Link 2</a></li>
      <li><a class="dropdown-item" href="#">My Link 3</a></li>
      <li><h5 class="dropdown-header">Header 2</h5></li>
      <li><a class="dropdown-item" href="#">Another link</a></li>
    </ul>
  </div>

Disable and Activate Menu items

To disable an item in the dropdown menu, use the .disabled class
To activate a specific dropdown item with the .active class

4 3
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><h5 class="dropdown-header">Header 1</h5></li>
      <li><a class="dropdown-item disabled" href="#">Disabled My Link 1</a></li>
      <li><a class="dropdown-item active" href="#">Active My Link 2</a></li>
      <li><a class="dropdown-item" href="#">Normal My Link 3</a></li>
      <li><h5 class="dropdown-header">Header 2</h5></li>
      <li><a class="dropdown-item" href="#">Another link</a></li>
    </ul>
  </div>

Dropdown Position Dropright

<div class="dropdown dropend">
5 3

Dropdown Position Dropleft

<div class="dropdown dropstart">
7 1

Dropdown Text

The .dropdown-item-text class is used to add plain text to a dropdown item

  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
      Dropdown button
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item-text" href="#">Text Link 1</a></li>
      <li><a class="dropdown-item-text" href="#">Text Link 2</a></li>
      <li><a class="dropdown-item-text" href="#">Text Link 3</a></li>
    </ul>
  </div>
6 1

Buttons with a Dropdown

59
<div class="container mt-3">
<h2>Dropdowns</h2>

<div class="btn-group">
	<button type="button" class="btn btn-primary">My Link 1</button>
	<button type="button" class="btn btn-primary">My Link 2</button>
	<div class="btn-group">
		<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">My Link 3</button>
		<ul class="dropdown-menu">
			<li><a class="dropdown-item" href="#">Sub Link 1</a></li>
			<li><a class="dropdown-item" href="#">Sub Link 1</a></li>
		</ul>
	</div>
</div>

Let us know if you liked the post. That’s the only way we can improve.

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here