Dropdown

Dropdown helps you build hidden menus or sets of commands that open by clicking on the toggle element.

Superkube contains only CSS/SCSS and does not contain Javascript. Because Superkube is independent of the implementation, you build the environment you need.

All the javascript is just for example and to show how the modules work.

Usage #

Use the dropdown class and list of items and links to show the dropdown.


<div class="dropdown hidden">
    <ul class="dropdown-list">
        <li class="dropdown-item">
            <a href="#" class="dropdown-link">...</a>
        </li>
    </ul>
</div>

Use the active class to set active state to a dropdown item.


<div class="dropdown hidden">
    <ul class="dropdown-list">
        <li class="dropdown-item active">
            <a href="#" class="dropdown-link">...</a>
        </li>
    </ul>
</div>

Use the dropdown-item-divider modifier to separate one dropdown item from another.


<div class="dropdown hidden">
    <ul class="dropdown-list">
        <li class="dropdown-item active">
            <a href="#" class="dropdown-link">...</a>
        </li>
        <li class="dropdown-item-divider"></li>
        <li class="dropdown-item">
            <a href="#" class="dropdown-link">...</a>
        </li>
    </ul>
</div>

Use the dropdown-dark modifier to show the dropdown with the dark appearance.


<div class="dropdown dropdown-dark hidden">
    <ul class="dropdown-list">
        <li class="dropdown-item">
            <a href="#" class="dropdown-link">...</a>
        </li>
    </ul>
</div>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// colors
--dropdown-background-color: var(--palette-white);
--dropdown-box-shadow: var(--shadow-300);
--dropdown-item-divider-color: var(--palette-black-10);
--dropdown-link-color: var(--palette-black);
--dropdown-link-background-color: var(--palette-white);
--dropdown-link-hover-color: var(--palette-black);
--dropdown-link-hover-background-color: var(--palette-neutral-light);
--dropdown-link-active-color: var(--palette-white-90);
--dropdown-link-active-background-color: var(--palette-active-dark);
--dropdown-link-disabled-color: var(--palette-black-40);
--dropdown-link-disabled-background-color: var(--palette-white);

// params
--dropdown-font-size: 15px;
--dropdown-line-height: var(--body-text-line);
--dropdown-border-radius: var(--radius-base);
--dropdown-level: var(--level-over-page);
--dropdown-padding: 8px;
--dropdown-width: 240px;
--dropdown-item-padding: 0;
--dropdown-item-space: 0;
--dropdown-item-divider-width: 1px;
--dropdown-item-divider-style: solid;
--dropdown-item-divider-space: 1rem;
--dropdown-link-padding: 6px 8px;
--dropdown-link-border-radius: var(--radius-base);