Version 3.0.6

Action Dropdown

Action dropdowns are toggleable, contextual overlays for displays lists of actions. They're toggled by clicking, not by hovering. They are used when there is a need to complete multiple quick actions, or when there is little visual real estate.

When a user clicks on the dropdown a list of actions will appear. Quick actions such as "Edit" or "Deactivate" should be listed first. "Delete" and other destructive actions should always be listed last, ideally sectioned off with an hr from other options.

                      
<div class="dropdown action-menu">
<button class="btn btn-xs btn-gray dropdown-toggle" id="MenuId" type="button" dropdown-toggle="dropdown" aria-haspopup="true">
<span class="glyphicons glyphicons-more" aria-hidden="true"></span>
<span class="reader-only">Action Menu</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="MenuId">
<div class="dropdown-caret">
<div class="caret-outer"></div>
<div class="caret-inner"></div>
</div>
<li role="menuitem">
<a href="#">
<span class="reader-only">Deactivate</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<span class="reader-only">Edit</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<span class="reader-only">Preview</span>
</a>
</li>
<hr>
<li role="menuitem">
<a href="#">
<span class="reader-only">Delete</span>
</a>
</li>
</ul>
</div>
                      
<div class="dropdown action-menu" uib-dropdown uib-keyboard-nav>
<button class="btn btn-xs btn-gray dropdown-toggle" id="MenuId" type="button" uib-dropdown-toggle>
<span class="glyphicons glyphicons-more" aria-hidden="true"></span>
<span class="reader-only">Action Menu</span>
</button>
<ul class="uib-dropdown-menu dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="MenuId">
<div class="dropdown-caret">
<div class="caret-outer"></div>
<div class="caret-inner"></div>
</div>
<li role="menuitem">
<a href="#">
<span class="reader-only">Deactivate</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<span class="reader-only">Edit</span>
</a>
</li>
<li role="menuitem">
<a href="#">
<span class="reader-only">Preview</span>
</a>
</li>
<hr>
<li role="menuitem">
<a href="#">
<span class="reader-only">Delete</span>
</a>
</li>
</ul>
</div>

Search Results

Powered by