• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Dropdowns

← Previous Next →

Dropdowns are a common user interface element used to display a list of options or actions in a compact space. They improve usability by grouping related items and reducing clutter on the page. Bootstrap 4 provides a flexible and responsive dropdown component that works seamlessly with buttons, links, and navigation menus. This tutorial covers all aspects of BS4 dropdowns, from basic implementation to advanced customization.

What Are Dropdowns?

A dropdown is a toggleable menu that displays a list of options when clicked or hovered. Dropdowns can contain links, buttons, forms, or custom HTML content. Bootstrap 4 makes it easy to create accessible and responsive dropdowns without writing complex JavaScript.

Basic Dropdown

The simplest dropdown consists of a button with the .dropdown-toggle class, wrapped in a .dropdown container. The menu items use the .dropdown-menu and .dropdown-item classes.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown Button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action 1</a>
    <a class="dropdown-item" href="#">Action 2</a>
    <a class="dropdown-item" href="#">Action 3</a>
  </div>
</div>

Clicking the button reveals the menu items, and clicking outside the dropdown closes it automatically.

Dropdown Variations

Bootstrap 4 allows dropdowns to be triggered by buttons or links, and to have different sizes or styles:

  • Use .btn-secondary, .btn-success, etc., for different button styles.

  • Add .btn-lg or .btn-sm to adjust the size of the toggle button.

  • Use <a> with .dropdown-toggle for link-based dropdowns.

<a class="btn btn-info dropdown-toggle" href="#" role="button" id="linkDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Dropdown Link
</a>
<div class="dropdown-menu" aria-labelledby="linkDropdown">
  <a class="dropdown-item" href="#">Option A</a>
  <a class="dropdown-item" href="#">Option B</a>
</div>

Split Button Dropdowns

A split button dropdown separates the main action and the dropdown menu. The main button performs a default action, while the smaller toggle opens the menu.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Default Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action 1</a>
    <a class="dropdown-item" href="#">Action 2</a>
  </div>
</div>

Split buttons are useful for showing a default action while offering additional options.

Dropdown Alignment

By default, dropdown menus align left with the toggle button. You can change alignment using .dropdown-menu-right to align the menu to the right.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned Dropdown
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownRight">
    <a class="dropdown-item" href="#">Option 1</a>
    <a class="dropdown-item" href="#">Option 2</a>
  </div>
</div>

Proper alignment is important for responsive design and preventing overflow issues.

Dropdown Headers and Dividers

You can organize dropdown items using headers and dividers:

  • .dropdown-header creates a non-clickable heading inside the menu.

  • .dropdown-divider adds a horizontal line to separate items.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Category 1</h6>
  <a class="dropdown-item" href="#">Item 1</a>
  <a class="dropdown-item" href="#">Item 2</a>
  <div class="dropdown-divider"></div>
  <h6 class="dropdown-header">Category 2</h6>
  <a class="dropdown-item" href="#">Item 3</a>
</div>

Headers and dividers improve readability for complex menus.

Dropdown Forms

Dropdowns can include forms, allowing users to input data without leaving the menu.

<div class="dropdown-menu p-4">
  <form>
    <div class="form-group">
      <label for="exampleInput">Email address</label>
      <input type="email" class="form-control" id="exampleInput" placeholder="Enter email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Forms in dropdowns are ideal for login menus, search fields, or quick actions.

Dropdown with Disabled Items

Some items can be disabled using .disabled to indicate they are unavailable.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Active Item</a>
  <a class="dropdown-item disabled" href="#">Disabled Item</a>
</div>

Disabled items provide clear feedback and prevent user errors.

Accessibility Considerations

Dropdowns should be accessible:

  • Use aria-haspopup="true" and aria-expanded="false" on toggles.

  • Include .sr-only text for screen readers when using split buttons.

  • Avoid placing interactive elements outside the dropdown toggle.

Best Practices

  1. Keep dropdown menus concise and organized.

  2. Use headers and dividers for complex menus.

  3. Ensure proper alignment for responsive layouts.

  4. Use accessible attributes for screen readers.

  5. Avoid nesting too many dropdowns to prevent confusion.

Practical Examples

  • User Menu: Profile, settings, logout options in a header.

  • Product Options: Select sizes or colors for an item.

  • Action Buttons: Combine default action with additional options using split buttons.

  • Quick Forms: Login or search forms inside dropdowns.

  • Categorized Menu: Use headers and dividers for organized navigation.

Summary of the Tutorial

Bootstrap 4 dropdowns provide a flexible, responsive way to present a compact list of actions or options. You can create button-based or link-based dropdowns, split buttons, right-aligned menus, and even include forms or headers. Dropdowns improve user experience by organizing content efficiently and making actions accessible without cluttering the interface.

Practice Questions

  1. Create a basic dropdown button with three clickable items: Action 1, Action 2, Action 3.

  2. Create a dropdown using a link (<a>) instead of a button, with two items.

  3. Create a split button dropdown with a main action and two dropdown items.

  4. Create a dropdown menu aligned to the right using .dropdown-menu-right.

  5. Create a dropdown with a header inside the menu and three items below it.

  6. Create a dropdown with a divider separating two groups of items.

  7. Create a dropdown that contains a simple form with an email input and a submit button.

  8. Create a dropdown with one disabled item and two active items.

  9. Create a dropdown inside a navbar for a user profile menu.

  10. Create a dropdown with contextual buttons, using .btn-success for the toggle and three .dropdown-items with different actions.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top