Categories
Bootstrap HTML

Bootstrap 5 — Dropdown Customization

Spread the love

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize dropdowns with Bootstrap 5.

Dropleft

We can add the dropleft class to make the menu show on the left.

The arrow will also be pointed to the left.

For example, we can write:

<div class="btn-group dropleft">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

We add the dropleft class to the outer div to make the arrow show to the left of the button.

Also, the menu will be displayed to the left of the button.

With a split button, we’ve to put the arrow on the right instead of the left:

<div class="btn-group dropleft">  
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">  
    <span class="sr-only">Toggle Dropdown</span>  
  </button>  
  <button type="button" class="btn btn-secondary">  
    Split  
  </button>  
  <ul class="dropdown-menu">  
    <li><a class="dropdown-item" href="#">foo</a></li>  
    <li><a class="dropdown-item" href="#">bar</a></li>  
    <li><a class="dropdown-item" href="#">baz</a></li>  
  </ul>  
</div>

Menu Items

Menu items had to be links in old versions of Bootstrap.

With Bootstrap 5, items can also be buttons.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We have li elements that have buttons instead of links.

Active

We can set an item to be active with the .active class.

For instance, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item active" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

With the active class, the item will be highlighted.

Disabled

To make an item disabled, we can add the disabled class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu">  
    <li><button class="dropdown-item disabled" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Now we can’t interact with the disabled item and it’s grayed out.

Menu Alignment

We can change the alignment of the menu.

To change it, we can add the .dropdown-menu-right class to the .dropdown-menu class to right-align the menu.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-right">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We have the dropdown-menu and dropdown-menu-right classes to move the alignment of it to the right.

Responsive Alignment

We can disable the dynamic positioning by adding the data-display='static' attribute.

For example, we can write:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-right">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We add the data-display attribute.

And we added the dropdown-menu-lg-right to display the menu correctly.

This will make the menu align to the left.

We can also align it to the left with the dropdown-menu-lg-left class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Menu Content

We can add various kinds of content to the menu.

Headers

We can add a header with the dropdown-header class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li>  
      <h6 class="dropdown-header">Dropdown header</h6>  
    </li>  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

Dividers

Also, we can add a divider with the dropdown-divider class:

<div class="btn-group">  
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-display="static">  
    button  
  </button>  
  <ul class="dropdown-menu dropdown-menu-lg-left">  
    <li><button class="dropdown-item" type="button">foo</button></li>  
    <li><button class="dropdown-item" type="button">bar</button></li>  
    <li>  
      <hr class="dropdown-divider">  
    </li>  
    <li><button class="dropdown-item" type="button">baz</button></li>  
  </ul>  
</div>

We’ll see an empty line in between the items.

Conclusion

We can customize the menu with many features.

We can add buttons as items.

Headers and dividers can also be added.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.