<abp-dropdown>
<abp-dropdown-button text="Dropdown button" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
<abp-dropdown-button button-type="Secondary" link="true" text="Dropdown button" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
<abp-dropdown-button button-type="Danger" text="Dropdown button" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
<abp-dropdown-divider />
<abp-dropdown-item href="#">Separated link</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Dropdown button</span></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<div class="dropdown btn-group">
<a class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-busy-text="Traitement..." roles="button" href="#"><span>Dropdown button</span></a>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-danger" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Dropdown button</span></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<abp-dropdown>
<abp-dropdown-button button-type="Danger" dropdown-style="Split" text="Dropdown button" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
<abp-dropdown-divider />
<abp-dropdown-item href="#">Separated link</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
<abp-dropdown-button size="Large" button-type="Secondary" text="Large button" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
<abp-dropdown-divider />
<abp-dropdown-item href="#">Separated link</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
<abp-dropdown-button size="Large" button-type="Secondary" dropdown-style="Split" text="Large split button" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
<abp-dropdown-divider />
<abp-dropdown-item href="#">Separated link</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
<abp-dropdown-button size="Small" button-type="Secondary" text="Small button" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
<abp-dropdown-divider />
<abp-dropdown-item href="#">Separated link</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
<abp-dropdown-button size="Small" button-type="Secondary" dropdown-style="Split" text="Small split button" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
<abp-dropdown-divider />
<abp-dropdown-item href="#">Separated link</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<div class="dropdown btn-group">
<button class="btn btn-danger" type="button" data-busy-text="Traitement..."><span>Dropdown button</span></button>
<button data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split btn btn-danger" type="button" data-busy-text="Traitement..."></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-secondary btn-lg" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Large button</span></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="dropdown btn-group">
<button class="btn btn-secondary btn-lg" type="button" data-busy-text="Traitement..."><span>Large split button</span></button>
<button data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split btn btn-secondary btn-lg" type="button" data-busy-text="Traitement..."></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-secondary btn-sm" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Small button</span></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<div class="dropdown btn-group">
<button class="btn btn-secondary btn-sm" type="button" data-busy-text="Traitement..."><span>Small split button</span></button>
<button data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split btn btn-secondary btn-sm" type="button" data-busy-text="Traitement..."></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<abp-dropdown direction="Up">
<abp-dropdown-button button-type="Secondary" text="Dropup" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown direction="Right">
<abp-dropdown-button button-type="Secondary" text="dropright" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown direction="Right">
<abp-dropdown-button button-type="Secondary" dropdown-style="Split" text="Split right" />
<abp-dropdown-menu>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item href="#">Another action</abp-dropdown-item>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<div class="dropdown btn-group dropup">
<button class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Dropup</span></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<div class="dropdown btn-group dropright">
<button class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>dropright</span></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<div class="dropdown btn-group dropright">
<button class="btn btn-secondary" type="button" data-busy-text="Traitement..."><span>Split right</span></button>
<button data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split btn btn-secondary" type="button" data-busy-text="Traitement..."></button>
<div></div>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<abp-dropdown>
<abp-dropdown-button button-type="Secondary" text="Dropdown" />
<abp-dropdown-menu>
<abp-dropdown-header>Dropdown Header</abp-dropdown-header>
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
<abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
<abp-dropdown-divider />
<abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text>
<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Dropdown</span></button>
<div></div>
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown Header</h6>
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item active">Active action</a>
<a href="#" class="dropdown-item disabled">Disabled action</a>
<div class="dropdown-divider"></div>
<span class="dropdown-item-text">Dropdown Item Text</span>
<a href="#" class="dropdown-item">Something else here</a>
</div>
</div>
<abp-dropdown>
<abp-dropdown-button button-type="Secondary" text="Right-aligned" />
<abp-dropdown-menu align="End">
<abp-dropdown-item href="#">Action</abp-dropdown-item>
<abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
<abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Right-aligned</span></button>
<div></div>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item active">Active action</a>
<a href="#" class="dropdown-item disabled">Disabled action</a>
</div>
</div>
Some example text that's free-flowing within the dropdown menu.
And this is more example text.
<abp-dropdown>
<abp-dropdown-button button-type="Secondary" text="Dropdown With Only Text" />
<abp-dropdown-menu class="p-4" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</abp-dropdown-menu>
</abp-dropdown>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Dropdown With Only Text</span></button>
<div></div>
<div class="p-4 dropdown-menu" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</div>
<abp-dropdown>
<abp-dropdown-button button-type="Secondary" text="Dropdown With Form" />
<abp-dropdown-menu>
<form class="px-4 py-3">
<abp-input asp-for="EmailAddress"></abp-input>
<abp-input asp-for="Password"></abp-input>
<abp-input asp-for="RememberMe"></abp-input>
<abp-button button-type="Primary" text="Sign In" type="submit" />
</form>
<abp-dropdown-divider></abp-dropdown-divider>
<abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item>
<abp-dropdown-item href="#">Forgot password?</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<div class="dropdown btn-group">
<button class="dropdown-toggle btn btn-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Traitement..."><span>Dropdown With Form</span></button>
<div></div>
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="mb-3"><label class="form-label" for="EmailAddress">EmailAddress</label><span> * </span><input type="email" data-val="true" data-val-email="The EmailAddress field is not a valid e-mail address." data-val-required="The EmailAddress field is required." id="EmailAddress" name="EmailAddress" value="" class="form-control " /><span class="text-danger field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span></div>
<div class="mb-3"><label class="form-label" for="Password">Password</label><span> * </span><input type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" class="form-control " /><span class="text-danger field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span></div>
<div class="mb-2 custom-checkbox custom-control form-check"><input type="checkbox" data-val="true" data-val-required="The RememberMe field is required." id="RememberMe" name="RememberMe" value="true" class="form-check-input " /><label class="form-check-label" for="RememberMe">RememberMe</label></div>
<button type="submit" class="btn btn-primary" data-busy-text="Traitement..."><span>Sign In</span></button>
<input name="RememberMe" type="hidden" value="false" /></form>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">New around here? Sign up</a>
<a href="#" class="dropdown-item">Forgot password?</a>
</div>
</div>