<p class="pow-font-regular pow-text-size-lg pow-margin-bottom-xs">You can open the dropdown into different direction using <strong>.open-right</strong> or <strong>.open-top</strong> class on the tag with <strong>.pow-dropdown</strong> class</p>
<!-- Open to the left -->
<div class="pow-dropdown-ref">
<button type="button" class="pow-action-xs icon-ellipsis-v icon-size-md active" style="margin-left: auto;">
<span class="visuallyhidden">Expand</span>
</button>
<div class="pow-dropdown active">
<div class="pow-dropdown-item">
<button type="button" class="pow-dropdown-button pow-no-wrap icon-FavoriteStar">Add to favorites</button>
</div>
<div class="pow-dropdown-item">
<button type="button" class="pow-dropdown-button pow-no-wrap">No icon</button>
</div>
<div class="pow-dropdown-item">
<button type="button" class="pow-dropdown-button pow-no-wrap icon-edit">Edit item</button>
</div>
</div>
</div>
<!-- Open to the right -->
<div class="pow-dropdown-ref">
<button type="button" class="pow-action-xs icon-ellipsis-v icon-size-md active">
<span class="visuallyhidden">Expand</span>
</button>
<div class="pow-dropdown active open-right">
<div class="pow-dropdown-item">
<button type="button" class="pow-dropdown-button pow-no-wrap icon-FavoriteStar">Add to favorites</button>
</div>
<div class="pow-dropdown-item">
<button type="button" class="pow-dropdown-button pow-no-wrap">No icon</button>
</div>
<div class="pow-dropdown-item">
<button type="button" class="pow-dropdown-button pow-no-wrap icon-edit">Edit item</button>
</div>
</div>
</div>
<!-- DO NOT REFER TO THIS -->
<style>
p {
margin: 0;
}
strong {
font-family: "Bold";
}
.pow-dropdown-ref {
margin: 30px;
}
.pow-dropdown {
margin-bottom: 20px;
}
</style>
Dropdown
Dropdown description