Bootstrap Dropdowns

Dropdowns are toggleable, contextual overlays designed for displaying lists of links and actions in a compact space. They are powered entirely by Bootstrap's bundled JavaScript plugins.

---

1. Basic Single Button Dropdown

To create a standard interactive dropdown, you need three connected pieces of architecture:

• An outer wrapper defined by the .dropdown class.
• A trigger button using both the .dropdown-toggle class, AND the data attribute data-bs-toggle="dropdown".
• The hidden menu block using .dropdown-menu wrapped around individual .dropdown-item anchors.

<!-- The Outer boundary wrapper -->
<div class="dropdown">

    <!-- The Clickable Trigger Button -->
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Open Menu
    </button>
    
    <!-- The Expanding Link Area -->
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
</div>

---

2. Contextual Colors

Because the interactive trigger element is just a standard .btn, you can leverage all of Bootstrap's semantic button-coloring modifiers simply by mapping `.btn-danger`, `.btn-success`, or `.btn-info` onto it.

<div class="dropdown">
    <!-- Inject standard button colors directly! -->
    <button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Danger Dropdown
    </button>
    ...
</div>

---

3. Split Button Dropdowns

Perhaps you want the actual text of the button to act as a Submit Link, while only the caret-arrow physically opens the dropdown list?

You can create a Split Button by discarding the `.dropdown` wrapper and instead using a `.btn-group`! You then hardcode two separate <button> elements right next to each other over the exact same .dropdown-menu array.

<!-- We bind them tightly using .btn-group -->
<div class="btn-group">
    <button type="button" class="btn btn-danger">Primary Action</button>
    
    <!-- Notice the dropdown-toggle-split utility -->
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    
    <ul class="dropdown-menu">...</ul>
</div>

---

4. Headers and Dividers

To keep massive arrays of links perfectly organized, you can inject un-clickable structural elements deep inside the inner <ul> array!

• .dropdown-header: Embeds small, gray, bold categorical titles above a group of links.
• .dropdown-divider: Embeds a thin, perfectly mapped `

  ---

  ` borderline stretching across the menu slice.

<ul class="dropdown-menu">
    <!-- Segment array elements cleanly using structural modifiers -->
    <li><h6 class="dropdown-header">System Operations</h6></li>
    <li><a class="dropdown-item" href="#">Log in</a></li>
    
    <!-- Slice the layout deeply with a divider -->
    <li><hr class="dropdown-divider"></li>
    
    <li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>