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>
<SprkDropdown
 choices={choices}
 iconName="settings"
/>
<script>
  const choices = {
    choiceFunction: (choiceText) => {
      console.log(choiceText);
    },
    items: [{
        text: 'Option 1',
        value: 'option-1',
        element: 'a',
        href: '/link',
        target: '_blank',
      },
      {
        text: 'Option 2',
        value: 'option-2',
        element: Link,
        to: '/link',
      },
      {
        text: 'Option 3',
        value: 'option-3',
      },
    ],
  };
</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.

Information

See below for available customization options:

Prop Type Description
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.
analyticsString string The value supplied will be assigned to the data-analytics attribute on the dropdown.
choices object Expects an object containing details around the choices available in the dropdown. See below for object details.
defaultTriggerText string For the 'informational' variant, this is the text that is rendered into the trigger by default.
iconName string For the 'base' variant, this is the icon name to render.
idString string The value supplied will be assigned to the data-id attribute on the dropdown.
screenReaderText string The value supplied will be visually hidden inside the trigger. Used with the base variant.
title string The value supplied will be displayed in a box above the choices.
variant string Can be 'base' or 'informational'. Determines which variant of the dropdown to render.

The choices object represents data that is shown inside the open dropdown.

Key Type Description
choiceFunction function The function supplied is executed when a choice is selected from the dropdown.
footer array Expects a Component to render at the foot of the open dropdown.
items array Expects an array of item objects, see below for details.

The choice's items array represents each choice's content.

Key Sample Value Description
content object The 'informational' variant of dropdown's choice list has more detail. The content object is how that detail is structured. See below for details.
isActive string If the dropdownType is 'informational', if true, the choice will be rendered initially in the active state. This is overridden by user action.
text string The text that is rendered to the screen. Only rendered if content is not present.
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.

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>
<SprkDropdown
 variant="informational"
 title="My Choices"
 choices={informationalChoices}
 defaultTriggerText="Make a selection..."
/>
<script>
  const informationalChoices = {
    choiceFunction: (choiceText) => {
      console.log(choiceText);
    },
    footer: <SprkButton variant="tertiary" additionalClasses="sprk-c-Button--compact" onClick={() => { console.log('Clicked!'); }}>Go Elsewhere</SprkButton>,
    items: [{
        content: {
          title: 'Choice Title',
          infoLine1: 'Information about this choice',
          infoLine2: 'More Information',
        },
        value: 'choice-title-1',
        isActive: false,
      },
      {
        element: Link,
        content: {
          title: 'Choice Title',
          infoLine1: 'Information about this choice',
          infoLine2: 'More Information',
        },
        to: '/button',
        value: 'choice-title-2',
        isActive: true,
      },
    ],
  };
</script>

Information

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

Information

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