Back to the list

Dropdown

Dropdowns can either be aligned on the left, or the right, depending on your needs. Any button can be used to open the dropdown, but always remember to add the btn class.

File to include

@import "components/dropdown";

Script to include

<script src="/lib/dropdown.js"></script>

Left

<div class="dropdown-container" data-justify="left">
    <button class="btn">Open dropdown</button>

    <div class="dropdown">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <button>Button</button>
        <button>Button</button>
    </div>
</div>

Right

<div class="dropdown-container" data-justify="right">
    <button class="btn">Open dropdown</button>

    <div class="dropdown">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <button>Button</button>
        <button>Button</button>
    </div>
</div>

Attributes

Name	Example value	Possible values	Default	Required
data-justify	right	"left" \| "right"	left	No