Dropdowns

Dropdowns represent content that is initially hidden to the user and revealed by an action—usually a hover or click—on a target area. The most common use of a dropdown is sub-navigation in a navigation menu. The dropdown event consists of two components:

The Trigger
.dropdown-trigger The element that when acted upon reveals the hidden content relative to the placement of itself. The trigger is usually represented by a button or menu item but the is actually the wrapper surounding the button or menu item and the dropdown itself.
The Target
.dropdownThe hidden element that is revealed by the trigger. It can be any content, but it usually takes the form as a set of links. It's position is relative to the trigger that activates it.
<div class="dropdown-trigger">
  <button class="button">Dropdown</button>
  <div class="dropdown">
    ...
  </div>
</div>

The two primary content types of dropdowns are dropdown menus and then more general dropdown content. Each content type can be used to define different dropdowns or combined for more complex dropdown content.

<!-- Dropdown Content -->
<div class="dropdown-content text-center">
  <a href="#" class="block">
    ...
  </a>
  <hr>
  ...
</div>

<!-- Dropdown Menus -->
<ul class="dropdown-menu">
  <li><a href="#">...</a></li>
  <li><a href="#">...</a>
    <ul class="dropdown-menu">
      <li><a href="#">...</a></li>
      ...
    </ul>
  </li>
  ...
</ul>

<!-- Dropdown with both Content and Menus -->
<div class="dropdown">
  <div class="dropdown-content">
    ...
  </div>
  <div class="dropdown-content text-center">
    <a href="#" class="block">
      ...
    </a>
  </div>
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
    <li><a href="#">...</a>
      <ul class="dropdown-menu">
        <li><a href="#">...</a></li>
        ...
      </ul>
    </li>
    ...
  </ul>
  <div class="dropdown-content">
    ...
  </div>
</div>

JavaScript

The default behavior of dropdowns is to reveal on :hover. The .on-click and .on-hover classes disable the hover styles and enables the use of click or a hover with a forgiving delay. These modifiers can be used by initiating the dropdowns JavaScript using the init() method.

dropdowns.init();
<div class="dropdown-trigger on-click">
  <button class="button">On Click</button>
  <div class="dropdown">
    ...
  </div>
</div>

<div class="dropdown-trigger on-hover">
  <button class="button">On Hover</button>
  <div class="dropdown">
    ...
  </div>
</div>

For more details on how to customize and use the public methods, take a look at the dropdowns JavaScript documentation.

Variable Map

Dropdown variables are encompassed within the $dropdowns map and are used throughout all dropdown mixins to set default values.

$dropdowns: (
  'output' : true,
  'output-position' : true,

  'class-dropdown-trigger' : 'dropdown-trigger',
  'class-dropdown'         : 'dropdown',
  'class-dropdown-content' : 'dropdown-content',
  'class-dropdown-menu'    : 'dropdown-menu',
  'class-anchor'           : 'anchor',

  'class-active' : 'active',
  'class-action-hover' : 'on-hover',
  'class-action-click' : 'on-click',

  'target' : null,
  'target-action' : null,

  'target-zindex'        : 100,
  'target-action-zindex' : 105,

  'width'             : 16rem,
  'padding'           : 1em,
  'padding-menu'      : 0.5em,
  'padding-menu-item' : 0.75em 1em,

  'block-margin'      : -0.5em,
  'block-padding'     : 1em,

  'font-size'   : px-to-rem(14px),
  'line-height' : 1.35em,

  'background'       : $white,
  'background-hover' : rgba($black, 0.05),
  'background-clip'  : padding-box,
  'border'           : 1px solid rgba($black, 0.1),
  'border-inner'     : 1px solid rgba($black, 0.1),
  'border-radius'    : $border-radius,
  'box-shadow'       : 0 2px 6px rgba($black, 0.15),
  'color'            : $color,
  'color-hover'      : $color,
  'color-active'     : $color-light,

  'content-sep'    : 0.5em,
  'content-sep-hr' : 1em,

  'offset-margin-one' : -1px, // The first position margin offset
  'offset-margin-two' : 0,    // The second position margin offset (does not apply to centered dropdowns)
  'offset-position'   : 0,    // The second position offset (does not apply to centered dropdowns)

  'dropdown-position'      : 'bottom-left',
  'dropdown-position-menu' : 'right-top',

) !default;

make-dropdown

Creates the base styles for dropdowns.

@include make-dropdown( $options: () );
Variable Type Default
$options Map $dropdowns

Example Usage

Below is an example of how BaseWeb initiates the class specific styles for dropdowns.

.#{map-get($dropdowns, 'class-dropdown')},
.#{map-get($dropdowns, 'class-dropdown-content')},
.#{map-get($dropdowns, 'class-dropdown-menu')} {
  @include make-dropdown();
}

make-dropdown-trigger

Creates the base styles for a dropdown trigger.

@include make-dropdown-trigger( $options: () );
Variable Type Default
$options Map $dropdowns

Example Usage

This example shows how BaseWeb initiates the styles for a dropdown trigger using the dropdown trigger class variable.

.#{map-get($dropdowns, 'class-dropdown-trigger')} {
  @include make-dropdown-trigger();
  ...
}

add-dropdown-style

Creates specific dropdown styles for a content type

@include add-dropdown-style( $options: (), $type : 'dropdown' );
Variable Type Default
$options Map $dropdowns
$type String (dropdown, dropdown-content, dropdown-menu) 'dropdown'

Example Usage

Shows how dropdown styles are added using the style type variable for preset styles.

.#{map-get($dropdowns, 'class-dropdown')} {
  @include add-dropdown-style($type: 'dropdown');
}

.#{map-get($dropdowns, 'class-dropdown-content')} {
  @include add-dropdown-style($type: 'dropdown-content');
}

.#{map-get($dropdowns, 'class-dropdown-menu')} {
  @include add-dropdown-style($type: 'dropdown-menu');
}

add-dropdown-position

Adds the position styles for a dropdown.

@include add-dropdown-position( $options: (), $anchor : 'bottom-left') );
Variable Type Options Default
$options Map $dropdowns
$anchor String 'bottom-left', 'bottom-right', 'bottom-center', 'top-left', 'top-right', 'top-center', 'left-top', 'left-bottom', 'left-center', 'right-top', 'right-bottom', 'right-center' 'bottom-left'

Example Usage

Example of how class specific positioning are added using the dropdown position mixin. This is added to the same element that is used to trigger the dropdown.

.anchor-bottom-left {
  @include add-dropdown-position('bottom-left');
}
.anchor-bottom-right {
  @include add-dropdown-position('bottom-right');
}
.anchor-bottom-center {
  @include add-dropdown-position('bottom-center');
}