More dropdown menu
<div class="dropdown">
<button class="btn btn-more dropdown-toggle" type="button" id="moreDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
</button>
<ul class="dropdown-menu" aria-labelledby="moreDropdownMenu">
<li><a class="dropdown-item" href="#">Action Item 1</a></li>
<li><a class="dropdown-item" href="#">Action Item 2</a></li>
<li><a class="dropdown-item" href="#">Action Item 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Action Item 4</a></li>
</ul>
</div>
</div>
Secondary dropdown menu
<div class="dropdown">
<button class="btn btn-link dropdown-toggle pb-1" type="button" id="secondaryDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
<span>Secondary Dropdown</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down dropdown-arrow"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<ul class="dropdown-menu" aria-labelledby="secondaryDropdownMenu">
<li><a class="dropdown-item" href="#">Action Item 1</a></li>
<li><a class="dropdown-item" href="#">Action Item 2</a></li>
<li><a class="dropdown-item" href="#">Action Item 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Action Item 4</a></li>
</ul>
</div>
Dropdown with header and content
Aggregation Details
Original Key
Label
Source
Label
Aggregated Date
Label
Aggregated By
Label
Comment
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" type="button" id="openDropdownMenu" data-bs-toggle="dropdown" aria-expanded="false">
Open Aggregation Details
</button>
<div class="dropdown-menu col-5">
<h6 class="dropdown-menu--header">Aggregation Details</h6>
<div class="row row-cols-2 gy-3 p-3">
<div class="col">
<h6 class="fs-7 text-muted text-uppercase fw-bold">Original Key</h6>
<p class="pb-0">Label</p>
</div>
<div class="col">
<h6 class="fs-7 text-muted text-uppercase fw-bold">Source</h6>
<p class="pb-0">Label</p>
</div>
<div class="col">
<h6 class="fs-7 text-muted text-uppercase fw-bold">Aggregated Date</h6>
<p class="pb-0">Label</p>
</div>
<div class="col">
<h6 class="fs-7 text-muted text-uppercase fw-bold">Aggregated By</h6>
<p class="pb-0">Label</p>
</div>
</div>
<div class="p-3 pb-0 pt-0">
<h6 class="fs-7 text-muted text-uppercase fw-bold">Comment</h6>
<p class="pb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>