Dropdown

Code Examples

Used to make a selection. Intended for navigation or application state change. The Dropdown component can be triggered from any element, but a link is suggested.

Configurable Variables

Variable Default Description
$sprk-dropdown-active-background-color $sprk-gray-tint-75 Sets the background color of the dropdown items that are active or hovered.
$sprk-dropdown-active-border 2.5px solid $sprk-green Sets the left border of the dropdown item that is active.
$sprk-dropdown-active-box-shadow -1px 0 0 0 $sprk-green Sets the box-shadow of the dropdown item that is active.
$sprk-dropdown-border 1px solid $sprk-gray Sets the border of the dropdown.
$sprk-dropdown-font-size $sprk-font-size-body-one Sets the font-size of the dropdown.
$sprk-dropdown-font-weight 400 Sets the font weight of the dropdown.
$sprk-dropdown-line-height 1 Sets the lineheight of the dropdown links.
$sprk-dropdown-footer-padding $sprk-space-inset-short-l Sets the padding around the dropdown footer in the informational variant.
$sprk-dropdown-max-width 24rem Sets the maximum width of the dropdown component.
$sprk-dropdown-padding $sprk-space-misc-a Sets the padding around the dropdown items. Calculations will be done to make sure it apprioriately spaced.
$sprk-dropdown-shadow 0 0 40px 2px rgba(0, 0, 0, 0.1) Sets the box-shadow of the dropdown.
$sprk-dropdown-title-color $sprk-black-tint-25 Sets the color of the dropdown title.
$sprk-dropdown-title-font-size $sprk-dropdown-font-size Sets the font-size of the dropdown title.
$sprk-dropdown-title-font-weight 300 Sets the font weight of the dropdown title.

Class Modifiers

Class Description
.sprk-c-Dropdown__link--active Applys styles to indicate that the dropdown link is currently active.

Base

<a class="sprk-b-Link sprk-b-Link--plain" href="#nogo" data-sprk-dropdown-trigger="dropdown02" aria-haspopup="true" role="combobox">
  <svg class="sprk-c-Icon sprk-u-mls" viewBox="0 0 100 100">
    <use xlink:href="#settings" />
  </svg>
</a>
<div class="sprk-c-Dropdown sprk-u-Display--none" data-sprk-dropdown="dropdown02">
  <div class="sprk-c-Dropdown__header">
    <h2 class="sprk-c-Dropdown__title">My Choices</h2>
  </div>
  <ul class="sprk-c-Dropdown__links">
    <li class="sprk-c-Dropdown__item" role="option">
      <a class="sprk-c-Dropdown__link" href="#nogo">
        Choice 1
      </a>
    </li>
    <li class="sprk-c-Dropdown__item" role="option">
      <a class="sprk-c-Dropdown__link" href="#nogo">
        Choice 2
      </a>
    </li>
  </ul>
</div>
          
<sprk-dropdown dropdownType="base" title="My Choices" triggerIconType="settings" [choices]="choices" (choiceMade)="choiceHandler($event)"></sprk-dropdown>
<script>
  choices = [{
      text: 'Option 1',
      value: 'Option 1'
    },
    {
      text: 'Option 2',
      value: 'Option 2'
    }
  ];
</script>

Information

See below for available customization options:

Input Type Description
dropdownType string Can be 'base', 'mastheadSelector' or 'informational'. Will cause the appropriate variant type to render.
additionalClasses string Expects a space separated string of classes to be added to the dropdown component.
additionalIconClasses string Expects a space separated string of classes to be added to the icon in the dropdown component.
additionalTriggerClasses string Expects a space separated string of classes to be added to the dropdown component's trigger link element.
additionalTriggerTextClasses string Expects a space separated string of classes to be added to the dropdown component's trigger text.
idString string The value supplied will be assigned to the data-id attribute on the dropdown.
analyticsString string The value supplied will be assigned to the data-analytics attribute on the dropdown.
selector string The value supplied will be assigned to the Dropdown__title text. Should be used if using the mastheadSelector type.
isOpen boolean Describes the initial state of the dropdown menu.
title string The value supplied will be displayed in a box above the choices.
choices object[] Expects an array of choice objects. See below for details about the choice object.
triggerIconType string If supplied, will render the icon to the right of the trigger text.
triggerText string The text that is initially rendered to the trigger. If dropdownType is 'informational', clicking on a choice will change the trigger text.
screenReaderText string The value supplied will be visually hidden inside the trigger. Userful for when title is empty, and only triggerIconType is supplied.
choiceMade (@Output) string When the dropdownType is 'informational' and a user clicks on a choice from the menu, the choiceMade event is emitted from the dropdown and contains the value of the clicked choice.

The choice object represents a choice that can be supplied to the dropdown.

Key Type Description
text string The text that is rendered to the screen. Only rendered if content is not present.
content object Contains a sub object for a more detailed choice. See below for information.
value string If the dropdownType is 'informational', the value will be set to the trigger text and also emitted on the click of a choice.
active string If the dropdownType is 'informational', if true, the choice will be rendered initially in the active state. This is overridden by user action.

The content object represents a choice's text that is more complex than just one line of text.

Key Sample Value Description
title Choice Title The text that is rendered to the screen in bold and at the top of the choice.
infoLine1 Information about this choice An optional line of text rendered to the choice's content.
infoLine2 Information about this choice An optional line of text rendered to the choice's content.

Informational

<a class="sprk-b-Link sprk-b-Link--plain sprk-u-mrs" href="#nogo" data-sprk-dropdown-trigger="dropdown01" aria-haspopup="true" data-id="link-1" data-analytics="object.action.event">
    <span data-sprk-dropdown-trigger-text-container="" role="combobox">Make a selection...</span>
  <svg class="sprk-c-Icon sprk-c-Icon--stroke-current-color sprk-u-mls" viewBox="0 0 100 100">
    <use xlink:href="#chevron-down" />
  </svg>
</a>
<div class="sprk-c-Dropdown sprk-u-Display--none" data-sprk-dropdown="dropdown01">
  <div class="sprk-c-Dropdown__header">
    <h2 class="sprk-c-Dropdown__title sprk-b-TypeBodyTwo">My Choices</h2>
  </div>
  <ul class="sprk-c-Dropdown__links">
    <li class="sprk-c-Dropdown__item">
      <a class="sprk-c-Dropdown__link" href="#nogo" data-sprk-dropdown-choice="Choice Title 1" role="option">
        <p class="sprk-b-TypeBodyOne">Choice Title</p>
        <p class="sprk-b-TypeBodyTwo">Information about this choice</p>
        <p class="sprk-b-TypeBodyTwo">More information</p>
      </a>
    </li>
    <li class="sprk-c-Dropdown__item" data-sprk-dropdown-choice="Choice Title 2">
      <a class="sprk-c-Dropdown__link" href="#nogo" role="option">
        <p class="sprk-b-TypeBodyOne">Choice Title</p>
        <p class="sprk-b-TypeBodyTwo">Information about this choice</p>
        <p class="sprk-b-TypeBodyTwo">More information</p>
      </a>
    </li>
  </ul>
  <div class="sprk-c-Dropdown__footer sprk-u-TextAlign--center">
    <a class="sprk-c-Button sprk-c-Button--tertiary" href="#nogo">
      Go Elsewhere
    </a>
  </div>
</div>
          
<sprk-dropdown dropdownType="informational" triggerText="Make a Selection..." title="My Choices" triggerIconType="chevron-down" (choiceMade)="choiceHandler($event)" [choices]="choices">
  <div class="sprk-c-Dropdown__footer sprk-u-TextAlign--center" sprkDropdownFooter>
    <a class="sprk-c-Button sprk-c-Button--tertiary" href="#nogo">
      Go Elsewhere
    </a>
  </div>
</sprk-dropdown>
<script>
  choices = [{
      content: {
        title: 'Choice Title',
        infoLine1: 'Information about this choice',
        infoLine2: 'More Information'
      },
      value: 'Choice Title 1',
      active: false
    },
    {
      content: {
        title: 'Choice Title',
        infoLine1: 'Information about this choice',
        infoLine2: 'More Information'
      },
      value: 'Choice Title 2',
      active: true
    }
  ];
</script>

Information

The customization options available for the base variant are also available for informational dropdowns.