Dropdowns
Dropdowns open a menu of links or actions from a toggle. Use data-ui-toggle="dropdown", add headers, dividers, icons or even forms, and control the direction, alignment, offset and closing behaviour with classes and data attributes.
1Basic dropdown
A toggle button with data-ui-toggle="dropdown" opens a menu of links.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-942" data-ui-toggle="dropdown" aria-expanded="false">Choose action</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-942">
<li><a class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
<li><a class="dropdown-item" href="#">Archive</a></li>
</ul>
</div>2Colour variants
Any button variant can be a dropdown toggle.
<div class="flex flex-wrap gap-2">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdown-943" data-ui-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-943">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdown-944" data-ui-toggle="dropdown" aria-expanded="false">Success</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-944">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdown-945" data-ui-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-945">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdown-946" data-ui-toggle="dropdown" aria-expanded="false">Danger</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-946">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-outline-dark dropdown-toggle" type="button" id="dropdown-947" data-ui-toggle="dropdown" aria-expanded="false">Outline dark</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-947">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>3Split buttons
A main action plus a separate caret for the alternatives.
<div class="flex flex-wrap gap-2">
<div class="btn-group">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="split-948" data-ui-toggle="dropdown" aria-expanded="false"><span class="sr-only">Toggle menu</span></button>
<ul class="dropdown-menu" aria-labelledby="split-948">
<li><a class="dropdown-item" href="#">Save and close</a></li>
<li><a class="dropdown-item" href="#">Save as copy</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Save as template</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary">Download</button>
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" id="split-949" data-ui-toggle="dropdown" aria-expanded="false"><span class="sr-only">Toggle menu</span></button>
<ul class="dropdown-menu" aria-labelledby="split-949">
<li><a class="dropdown-item" href="#">As PDF</a></li>
<li><a class="dropdown-item" href="#">As PNG</a></li>
<li><a class="dropdown-item" href="#">As SVG</a></li>
</ul>
</div>
</div>4Sizes
Large and small dropdown buttons.
<div class="flex flex-wrap items-center gap-2">
<div class="btn-group">
<button class="btn btn-dark btn-lg dropdown-toggle" type="button" id="dropdown-950" data-ui-toggle="dropdown" aria-expanded="false">Large</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-950">
<li><a class="dropdown-item" href="#">One</a></li>
<li><a class="dropdown-item" href="#">Two</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdown-951" data-ui-toggle="dropdown" aria-expanded="false">Default</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-951">
<li><a class="dropdown-item" href="#">One</a></li>
<li><a class="dropdown-item" href="#">Two</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-dark btn-sm dropdown-toggle" type="button" id="dropdown-952" data-ui-toggle="dropdown" aria-expanded="false">Small</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-952">
<li><a class="dropdown-item" href="#">One</a></li>
<li><a class="dropdown-item" href="#">Two</a></li>
</ul>
</div>
</div>5Directions
dropup, dropend, dropstart and dropup-center change where the menu opens.
<div class="flex flex-wrap gap-2 py-12 justify-center">
<div class="btn-group dropup">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-953" data-ui-toggle="dropdown" aria-expanded="false"><i class="bi bi-arrow-up" aria-hidden="true"></i> Dropup</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-953">
<li><a class="dropdown-item" href="#">Item one</a></li>
<li><a class="dropdown-item" href="#">Item two</a></li>
</ul>
</div>
<div class="btn-group dropend">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-954" data-ui-toggle="dropdown" aria-expanded="false">Dropend <i class="bi bi-arrow-right" aria-hidden="true"></i></button>
<ul class="dropdown-menu" aria-labelledby="dropdown-954">
<li><a class="dropdown-item" href="#">Item one</a></li>
<li><a class="dropdown-item" href="#">Item two</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-955" data-ui-toggle="dropdown" aria-expanded="false"><i class="bi bi-arrow-left" aria-hidden="true"></i> Dropstart</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-955">
<li><a class="dropdown-item" href="#">Item one</a></li>
<li><a class="dropdown-item" href="#">Item two</a></li>
</ul>
</div>
<div class="dropup-center dropup">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-956" data-ui-toggle="dropdown" aria-expanded="false">Centred dropup</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-956">
<li><a class="dropdown-item" href="#">Item one</a></li>
<li><a class="dropdown-item" href="#">Item two</a></li>
</ul>
</div>
</div>6Dark menu
data-ui-theme="dark" on the menu gives a dark dropdown on a light page.
<div class="dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" data-ui-toggle="dropdown" aria-expanded="false"><i class="bi bi-moon-stars" aria-hidden="true"></i> Dark menu</button>
<ul class="dropdown-menu" data-ui-theme="dark">
<li><a class="dropdown-item active" href="#" aria-current="true">Dashboard</a></li>
<li><a class="dropdown-item" href="#">Projects</a></li>
<li><a class="dropdown-item" href="#">Team</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>7Headers, dividers and disabled items
Group items under headers, separate them with dividers and disable unavailable ones.
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdown-957" data-ui-toggle="dropdown" aria-expanded="false">Document</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-957">
<li><h6 class="dropdown-header">File</h6></li>
<li><a class="dropdown-item" href="#">New</a></li>
<li><a class="dropdown-item" href="#">Open recent</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Save (no changes)</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Share</h6></li>
<li><a class="dropdown-item" href="#">Invite people</a></li>
<li><a class="dropdown-item" href="#">Copy link</a></li>
</ul>
</div>8Items with icons
Icons and shortcut hints make menu items faster to scan.
<div class="dropdown">
<button class="btn btn-light border dropdown-toggle" type="button" id="dropdown-958" data-ui-toggle="dropdown" aria-expanded="false"><i class="bi bi-three-dots" aria-hidden="true"></i> More</button>
<ul class="dropdown-menu shadow-md" aria-labelledby="dropdown-958">
<li><a class="dropdown-item flex gap-2 items-center" href="#"><i class="bi bi-pencil-fill" aria-hidden="true"></i> Rename<kbd class="ms-auto small">F2</kbd></a></li>
<li><a class="dropdown-item flex gap-2 items-center" href="#"><i class="bi bi-files" aria-hidden="true"></i> Duplicate<kbd class="ms-auto small">Ctrl D</kbd></a></li>
<li><a class="dropdown-item flex gap-2 items-center" href="#"><i class="bi bi-folder-symlink-fill" aria-hidden="true"></i> Move to</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item flex gap-2 items-center text-danger-emphasis" href="#"><i class="bi bi-trash-fill" aria-hidden="true"></i> Delete<kbd class="ms-auto small">Del</kbd></a></li>
</ul>
</div>9End-aligned menu
dropdown-menu-end lines the menu up with the right edge of the button.
<div class="flex justify-end">
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-959" data-ui-toggle="dropdown" aria-expanded="false"><i class="bi bi-sort-down" aria-hidden="true"></i> Sort by</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-959">
<li><a class="dropdown-item active" href="#" aria-current="true">Newest first</a></li>
<li><a class="dropdown-item" href="#">Oldest first</a></li>
<li><a class="dropdown-item" href="#">Price: low to high</a></li>
<li><a class="dropdown-item" href="#">Price: high to low</a></li>
</ul>
</div>
</div>10Form in a menu
A dropdown with checkboxes; data-ui-auto-close="outside" keeps it open while ticking.
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dd-filter-960" data-ui-toggle="dropdown" data-ui-auto-close="outside" aria-expanded="false"><i class="bi bi-funnel-fill" aria-hidden="true"></i> Status</button>
<form class="dropdown-menu p-4" style="min-width: 220px;" aria-labelledby="dd-filter-960">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="dd-chk-961" checked>
<label class="form-check-label" for="dd-chk-961">Active</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="dd-chk-962" checked>
<label class="form-check-label" for="dd-chk-962">Pending</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="dd-chk-963">
<label class="form-check-label" for="dd-chk-963">Archived</label>
</div>
<div class="flex justify-between mt-4">
<button type="reset" class="btn btn-link btn-sm px-0">Reset</button>
<button type="submit" class="btn btn-primary btn-sm">Apply</button>
</div>
</form>
</div>11User account menu
Avatar toggle with the user's name, profile links and sign out.
<div class="dropdown">
<a href="#" class="inline-flex items-center gap-2 link-body-emphasis no-underline dropdown-toggle" id="user-menu-964" data-ui-toggle="dropdown" aria-expanded="false"><img src="../assets/img/avatar-7.svg" alt="Ruby Patel" class="rounded-full shrink-0" width="36" height="36"><span class="font-semibold">Ruby</span></a>
<ul class="dropdown-menu shadow-md" aria-labelledby="user-menu-964">
<li><div class="dropdown-item-text"><div class="font-semibold">Ruby Patel</div><div class="small text-muted">ruby.patel@example.com</div></div></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-person-fill" aria-hidden="true"></i> Profile</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear-fill" aria-hidden="true"></i> Settings</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-credit-card-fill" aria-hidden="true"></i> Billing</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right" aria-hidden="true"></i> Sign out</a></li>
</ul>
</div>12Notification dropdown
A bell with an unread badge opens a wide list of recent notifications.
<div class="dropdown">
<button class="btn btn-light border relative" type="button" id="notif-965" data-ui-toggle="dropdown" aria-expanded="false" aria-label="Notifications"><i class="bi bi-bell-fill" aria-hidden="true"></i><span class="absolute top-0 start-full -translate-x-1/2 -translate-y-1/2 badge rounded-full bg-danger">3</span></button>
<ul class="dropdown-menu shadow-md py-0 overflow-hidden" style="width: 300px;" aria-labelledby="notif-965">
<li class="flex justify-between items-center px-4 py-2 border-b"><strong class="small">Notifications</strong><a href="#" class="small">Mark all read</a></li>
<li><a class="dropdown-item flex gap-2 py-2 whitespace-normal" href="#"><img src="../assets/img/avatar-5.svg" alt="Aria Whitaker" class="rounded-full shrink-0" width="36" height="36"><span class="small"><strong>Aria Whitaker</strong> shared a file<span class="block text-muted">just now</span></span></a></li>
<li><a class="dropdown-item flex gap-2 py-2 whitespace-normal" href="#"><img src="../assets/img/avatar-6.svg" alt="Ella Lindqvist" class="rounded-full shrink-0" width="36" height="36"><span class="small"><strong>Ella Lindqvist</strong> shared a file<span class="block text-muted">21 min ago</span></span></a></li>
<li><a class="dropdown-item flex gap-2 py-2 whitespace-normal" href="#"><img src="../assets/img/avatar-2.svg" alt="Freya Quinn" class="rounded-full shrink-0" width="36" height="36"><span class="small"><strong>Freya Quinn</strong> commented on your post<span class="block text-muted">just now</span></span></a></li>
<li class="border-t"><a class="dropdown-item text-center small py-2" href="#">View all</a></li>
</ul>
</div>13Auto-close behaviour
data-ui-auto-close decides which clicks close the menu.
<div class="flex flex-wrap gap-2">
<div class="btn-group">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" id="autoclose-966" data-ui-toggle="dropdown" data-ui-auto-close="true" aria-expanded="false">auto-close: true</button>
<ul class="dropdown-menu" aria-labelledby="autoclose-966">
<li><span class="dropdown-item-text small text-muted">Closes on any click</span></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" id="autoclose-967" data-ui-toggle="dropdown" data-ui-auto-close="inside" aria-expanded="false">auto-close: inside</button>
<ul class="dropdown-menu" aria-labelledby="autoclose-967">
<li><span class="dropdown-item-text small text-muted">Closes on inside click</span></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" id="autoclose-968" data-ui-toggle="dropdown" data-ui-auto-close="outside" aria-expanded="false">auto-close: outside</button>
<ul class="dropdown-menu" aria-labelledby="autoclose-968">
<li><span class="dropdown-item-text small text-muted">Closes on outside click</span></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" id="autoclose-969" data-ui-toggle="dropdown" data-ui-auto-close="false" aria-expanded="false">auto-close: false</button>
<ul class="dropdown-menu" aria-labelledby="autoclose-969">
<li><span class="dropdown-item-text small text-muted">Closes on toggle only</span></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
</div>14Searchable menu
A search box at the top filters the items as you type (data-demo-filter).
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="country-970" data-ui-toggle="dropdown" data-ui-auto-close="outside" aria-expanded="false"><i class="bi bi-globe" aria-hidden="true"></i> Country</button>
<div class="dropdown-menu pt-0" style="width: 240px;" aria-labelledby="country-970">
<div class="p-2 border-b">
<label class="sr-only" for="country-search-972">Search countries</label>
<input type="search" class="form-control form-control-sm" id="country-search-972" placeholder="Type to filter" data-demo-filter="#country-list-971">
</div>
<ul class="list-unstyled mb-0 overflow-auto" style="max-height: 180px;" id="country-list-971">
<li data-demo-filter-item><a class="dropdown-item" href="#">Australia</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">Canada</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">Denmark</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">Ireland</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">Japan</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">New Zealand</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">Norway</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">Portugal</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">Singapore</a></li>
<li data-demo-filter-item><a class="dropdown-item" href="#">Spain</a></li>
</ul>
</div>
</div>15Active item
Mark the current choice with .active and aria-current.
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-973" data-ui-toggle="dropdown" aria-expanded="false"><i class="bi bi-translate" aria-hidden="true"></i> Units: Metric</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-973">
<li><a class="dropdown-item active flex justify-between" href="#" aria-current="true">Metric <i class="bi bi-check2" aria-hidden="true"></i></a></li>
<li><a class="dropdown-item" href="#">Imperial</a></li>
</ul>
</div>16Plain text in a menu
dropdown-item-text and a paragraph add help text inside the menu.
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdown-974" data-ui-toggle="dropdown" aria-expanded="false"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Help</button>
<ul class="dropdown-menu p-4 text-muted" aria-labelledby="dropdown-974">
<li><p class="small mb-2" style="width: 220px;">We listen first, then build a plan around what you actually need.</p></li>
<li><a class="btn btn-sm btn-primary" href="#">Open help centre</a></li>
</ul>
</div>17Centred menu
dropdown-center centres the menu under the toggle.
<div class="flex justify-center">
<div class="dropdown-center">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdown-975" data-ui-toggle="dropdown" aria-expanded="false">Centred dropdown</button>
<ul class="dropdown-menu" aria-labelledby="dropdown-975">
<li><a class="dropdown-item" href="#">Short</a></li>
<li><a class="dropdown-item" href="#">A longer menu item</a></li>
<li><a class="dropdown-item" href="#">Medium item</a></li>
</ul>
</div>
</div>18Offset menu
data-ui-offset moves the menu away from the toggle (skidding, distance).
<div class="flex gap-2">
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="offset-976" data-ui-toggle="dropdown" data-ui-offset="10,20" aria-expanded="false">Offset 10,20</button>
<ul class="dropdown-menu" aria-labelledby="offset-976">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="offset-977" data-ui-toggle="dropdown" data-ui-offset="0,4" aria-expanded="false">Offset 0,4</button>
<ul class="dropdown-menu" aria-labelledby="offset-977">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
</div>19Mega menu
A wide menu with several columns of grouped links.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="mega-978" data-ui-toggle="dropdown" aria-expanded="false">Explore</button>
<div class="dropdown-menu p-4 shadow-md ca-mega" aria-labelledby="mega-978">
<div class="row g-3">
<div class="col-sm-4">
<h6 class="dropdown-header px-0"><i class="bi bi-grid-fill" aria-hidden="true"></i> Products</h6>
<ul class="list-unstyled small mb-0">
<li><a class="dropdown-item rounded-md px-2" href="#">Overview</a></li>
<li><a class="dropdown-item rounded-md px-2" href="#">Features</a></li>
<li><a class="dropdown-item rounded-md px-2" href="#">Pricing</a></li>
</ul>
</div>
<div class="col-sm-4">
<h6 class="dropdown-header px-0"><i class="bi bi-book-fill" aria-hidden="true"></i> Resources</h6>
<ul class="list-unstyled small mb-0">
<li><a class="dropdown-item rounded-md px-2" href="#">Guides</a></li>
<li><a class="dropdown-item rounded-md px-2" href="#">Blog</a></li>
<li><a class="dropdown-item rounded-md px-2" href="#">Webinars</a></li>
</ul>
</div>
<div class="col-sm-4">
<h6 class="dropdown-header px-0"><i class="bi bi-building-fill" aria-hidden="true"></i> Company</h6>
<ul class="list-unstyled small mb-0">
<li><a class="dropdown-item rounded-md px-2" href="#">About</a></li>
<li><a class="dropdown-item rounded-md px-2" href="#">Careers</a></li>
<li><a class="dropdown-item rounded-md px-2" href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>20Row action menus
A three-dots button per table row opens view, edit and delete actions.
| Project | Owner | Actions |
|---|---|---|
| Simple journey | Nadia Sato | |
| Smart journey | Liam Brennan | |
| Honest launch | Samir Tanaka |
<div class="table-responsive" style="min-height: 220px;">
<table class="table align-middle">
<thead>
<tr>
<th scope="col">Project</th>
<th scope="col">Owner</th>
<th scope="col" class="text-end"><span class="sr-only">Actions</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Simple journey</td>
<td>Nadia Sato</td>
<td class="text-end"><div class="dropdown"><button class="btn btn-sm btn-link link-secondary" type="button" id="kebab-979" data-ui-toggle="dropdown" aria-expanded="false" aria-label="Row actions"><i class="bi bi-three-dots-vertical" aria-hidden="true"></i></button><ul class="dropdown-menu dropdown-menu-end" aria-labelledby="kebab-979"><li><a class="dropdown-item" href="#"><i class="bi bi-eye" aria-hidden="true"></i> View</a></li><li><a class="dropdown-item" href="#"><i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item text-danger-emphasis" href="#"><i class="bi bi-trash-fill" aria-hidden="true"></i> Delete</a></li></ul></div></td>
</tr>
<tr>
<td>Smart journey</td>
<td>Liam Brennan</td>
<td class="text-end"><div class="dropdown"><button class="btn btn-sm btn-link link-secondary" type="button" id="kebab-980" data-ui-toggle="dropdown" aria-expanded="false" aria-label="Row actions"><i class="bi bi-three-dots-vertical" aria-hidden="true"></i></button><ul class="dropdown-menu dropdown-menu-end" aria-labelledby="kebab-980"><li><a class="dropdown-item" href="#"><i class="bi bi-eye" aria-hidden="true"></i> View</a></li><li><a class="dropdown-item" href="#"><i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item text-danger-emphasis" href="#"><i class="bi bi-trash-fill" aria-hidden="true"></i> Delete</a></li></ul></div></td>
</tr>
<tr>
<td>Honest launch</td>
<td>Samir Tanaka</td>
<td class="text-end"><div class="dropdown"><button class="btn btn-sm btn-link link-secondary" type="button" id="kebab-981" data-ui-toggle="dropdown" aria-expanded="false" aria-label="Row actions"><i class="bi bi-three-dots-vertical" aria-hidden="true"></i></button><ul class="dropdown-menu dropdown-menu-end" aria-labelledby="kebab-981"><li><a class="dropdown-item" href="#"><i class="bi bi-eye" aria-hidden="true"></i> View</a></li><li><a class="dropdown-item" href="#"><i class="bi bi-pencil-fill" aria-hidden="true"></i> Edit</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item text-danger-emphasis" href="#"><i class="bi bi-trash-fill" aria-hidden="true"></i> Delete</a></li></ul></div></td>
</tr>
</tbody>
</table>
</div>