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.

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-c-Icon--l" 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 sprk-b-TypeDisplayEight">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' 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.
additionalTriggerClasses string Expects a space separated string of classes to be added to the dropdown component's trigger.
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.
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--l sprk-c-Icon--current-color" 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-TypeDisplayEight">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>Information about this choice</p>
        <p>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>Information about this choice</p>
        <p>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.