Dropdown

View Source

Dropdown component pack for Seed

Install

npm install seed-dropdown --save

Dependencies

Bootstrap

Javascript

This component’s interactions are powered by Bootstrap. Refer to their dropdown documentation for Javascript usage.

CSS

This component does not require any of Bootstrap’s CSS for style. In fact, it is recommended that Bootstrap’s CSS are omitted for seed-dropdown to be styled properly.

Class names

In the markup examples (below), you will notice that for certain components there is a mixture of seed class names and Bootstrap class names. In order for dropdown’s to work properly, Bootstrap’s Javascript requires certain elements to have certain class names. seed-dropdown does not use any of these classes for styling.

Example

Action Another action Something else here 
<div class="c-dropdown dropdown">
  <button class="c-button c-dropdown__toggle dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="c-card c-dropdown__menu c-dropdown__menu--truncate dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="c-list">
      <a class="c-list__item dropdown-item" href="#">Action</a>
      <a class="c-list__item dropdown-item" href="#">Another action</a>
      <a class="c-list__item dropdown-item disabled" href="#">Something else here</a>
    </div>
  </div>
</div>

Headers and Dividers

Dropdown header
Action Another action Something else here
Another header
Action 
<div class="c-dropdown dropdown">
  <button class="c-button c-dropdown__toggle dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="c-card c-dropdown__menu c-dropdown__menu--truncate dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="c-list">
      <h5 class="c-dropdown__header">Dropdown header</h5>
      <a class="c-list__item dropdown-item" href="#">Action</a>
      <a class="c-list__item dropdown-item" href="#">Another action</a>
      <a class="c-list__item dropdown-item disabled" href="#">Something else here</a>
    </div>
    <div class="c-list">
      <h5 class="c-dropdown__header">Another header</h5>
      <a class="c-list__item dropdown-item" href="#">Action</a>
    </div>
  </div>
</div>

Selects

For <select> dropdowns, check out seed-input.

<select class="c-input">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Directions

The dropdown menu’s direction can be modified by adding directional based modifications to .c-dropdown.

All of the following classes support responsive modifiers.

The following dropdown menu drops up and is positioned to the right.

Action 
<div class="c-dropdown c-dropdown--up c-dropdown--right dropdown">
  <button class="c-button c-dropdown__toggle dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="c-card c-dropdown__menu c-dropdown__menu--truncate dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="c-list">
      <a class="c-list__item dropdown-item" href="#">Action</a>
    </div>
  </div>
</div>

Sizes

seed-dropdown uses seed-button as its dropdown toggle.

See seed-button’s size documentation for more details on sizes.

Action 
<div class="c-dropdown dropdown">
  <button class="c-button c-button--sm c-dropdown__toggle dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small dropdown button
  </button>
  <div class="c-card c-dropdown__menu c-dropdown__menu--truncate dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="c-list">
      <a class="c-list__item dropdown-item" href="#">Action</a>
    </div>
  </div>
</div>

States

seed-dropdown uses seed-button as its dropdown toggle.

See seed-button’s state documentation for more details on states.

Action 
<div class="c-dropdown dropdown">
  <button class="c-button is-success c-dropdown__toggle dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Success dropdown
  </button>
  <div class="c-card c-dropdown__menu c-dropdown__menu--truncate dropdown-menu" aria-labelledby="dropdownMenuButton">
    <div class="c-list">
      <a class="c-list__item dropdown-item" href="#">Action</a>
    </div>
  </div>
</div>

Control groups

The borders of the seed-dropdown toggles will automatically adjust when placed inside of a seed-control-group.

Action 
<div class="o-control-group">
  <button class="c-button">
    Button
  </button>
  <div class="c-dropdown dropdown">
    <button class="c-button c-dropdown__toggle dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="c-card c-dropdown__menu c-dropdown__menu--truncate dropdown-menu" aria-labelledby="dropdownMenuButton">
      <div class="c-list">
        <a class="c-list__item dropdown-item" href="#">Action</a>
      </div>
    </div>
  </div>
</div>

Configurations

Below are the default Sass configuration variables for seed-dropdown. The variables can be found in the pack’s _config.scss file.

seed-dropdown/_config.scss
// Dropdown :: Config

// Namespaces
$seed-dropdown-namespace: c-dropdown !default;
$seed-dropdown-header-namespace: #{$seed-dropdown-namespace}__header !default;
$seed-dropdown-menu-namespace: #{$seed-dropdown-namespace}__menu !default;
$seed-dropdown-toggle-namespace: #{$seed-dropdown-namespace}__toggle !default;
// Namespaces: States
$seed-dropdown-open-namespace: open !default;
$seed-dropdown-disabled-namespace: disabled !default;

// Namespaces of other seed packs
$seed-caret-namespace: "c-caret" !default;
$seed-list-namespace: "c-list" !default;
$seed-list-item-namespace: #{$seed-list-namespace}__item !default;

// Config: Toggle
$seed-dropdown-toggle-background-color-open: rgba(black, 0.1) !default;
$seed-dropdown-toggle-caret-enable: true !default;
$seed-dropdown-toggle-caret-margin-left: 6px !default;
$seed-dropdown-toggle-caret-size: 4px !default;
$seed-dropdown-toggle-z-index: 1 !default;
// Config: Menu
$seed-dropdown-menu-margin: 2px 0 0 !default;
$seed-dropdown-menu-max-width: 480px !default;
$seed-dropdown-menu-min-width: 160px !default;
$seed-dropdown-menu-padding: 4px 0 !default;
$seed-dropdown-menu-z-index: 1000 !default;
// Config: Menu divier
$seed-dropdown-menu-divider-border: 1px solid #eee !default;
$seed-dropdown-menu-divider-offset: 8px !default;
// Config: Menu item
$seed-dropdown-menu-item-background-color-hover: #f5f5f5 !default;
$seed-dropdown-menu-item-color: #2b2b2b !default;
$seed-dropdown-menu-item-padding: 20px !default;
$seed-dropdown-menu-item-opacity-disabled: 0.5 !default;
$seed-dropdown-menu-item-white-space: nowrap !default;
// Config: Header
$seed-dropdown-header-color: #A5B2BD !default;
$seed-dropdown-header-font-size: 80% !default;
$seed-dropdown-header-line-height: 1.1 !default;
$seed-dropdown-header-margin: 0 !default;
$seed-dropdown-header-padding: 5px $seed-dropdown-menu-item-padding !default;
$seed-dropdown-header-white-space: nowrap !default;

// Config: Caret directions
$seed-dropdown-caret-directions: (
  up: (
    transform: rotate(180deg)
  ),
  down: (
    transform: rotate(0deg)
  ),
) !default;

// Config: Drop directions
$seed-dropdown-drop-directions: (
  up: (
    bottom: 100%,
    margin-bottom: 2px,
    top: auto
  ),
  down: (
    bottom: auto,
    margin-top: 2px,
    top: 100%
  ),
  left: (
    left: 0,
    right: auto
  ),
  right: (
    left: auto,
    right: 0
  ),
) !default;
↑Back to top
© Help Scout 2024