Styleguide | UI Elements | Whimsy - SaaS Website Template

Base UI

Dropdowns

Single dropdown button A standard single dropdown button to select options or actions with difference sizes.

Documentation

Starter Kit Codes

Starter Kit Code

<div class="btn-group">
	<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 1</a></li>
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 2</a></li>
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 3</a></li>
	</ul>
</div>

Starter Kit Code

<div class="btn-group">
	<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 1</a></li>
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 2</a></li>
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 3</a></li>
	</ul>
</div>

Starter Kit Code

<div class="btn-group">
	<button type="button" class="btn btn-outline-secondary btn-lg dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
		Dropdown
	</button>
	<ul class="dropdown-menu">
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 1</a></li>
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 2</a></li>
		<li><a class="dropdown-item" href="javascript:void()">Dropdown 3</a></li>
	</ul>
</div>