Dropdown

Simple implementation of CSS dropdown - doesn't require any JavaScript. Well you can use JavaScript for better compatibility.

<div class="dropdown">
    <button class="button has-dropdown-icon">Dropdown</button>
    <div class="dropdown-body">
        <div class="dropdown-body-text">Dropdown content</div>
    </div>
</div>

<div class="dropdown">
    <button class="button button-primary has-dropdown-icon">Dropdown menu</button>
    <div class="dropdown-body">
        <a class="dropdown-item" href="#">Some action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <span class="dropdown-item-sep"></span>
        <a class="dropdown-item" href="#">CSS dropdown without JS</a>
    </div>
</div>

Add active class to dropdown if you want to open it by default.

<div class="dropdown active"></div>

SASS reference

$dropdown-icons-size: rem(5) !default;
$dropdown-icons-size-small: rem(4) !default;
$dropdown-icons-size-large: rem(7) !default;
$dropdown-width: rem(220) !default;
$dropdown-shadow: 0 rem(2) rem(5) 0 rgba(0, 0, 0, 0.08) !default;

:root {
    --r-dropdown-icons-size: #{$dropdown-icons-size};
    --r-dropdown-icons-size-small: #{$dropdown-icons-size-small};
    --r-dropdown-icons-size-large: #{$dropdown-icons-size-large};
    --r-dropdown-width: #{$dropdown-width};
    --r-dropdown-background: var(--r-color-white-darken-2);
    --r-dropdown-border-color: var(--r-color-white-darken-15);
    --r-dropdown-shadow: #{$dropdown-shadow};
    --r-dropdown-item-color: var(--r-color-dark-lighten-20);
    --r-dropdown-item-hover-background-color: var(--r-color-white-darken-5);
    --r-dropdown-item-hover-color: var(--r-color-dark);
    --r-dropdown-item-sep: var(--r-color-white-darken-8);    
}