<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>