Dropdowns

Dropdowns are used to present individuals with a wide range of options and actions they can take.

Default

<tk-dropdown trigger-text="School">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Beauxbatons Academy
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Durmstrang Institute
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Hogwarts
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

The dropdown text pattern is used when you need a dropdown action in a small space or near another body of text.

Pre-Trigger Text

<tk-dropdown pre-trigger-text="Fantastic beast of choice" trigger-text="Nifflers">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Bowtruckles
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Nifflers
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

This adds text before a dropdown trigger and bolds the call-to-action on the trigger. This is the only time we bold the dropdown trigger text.

Trigger with icon

<tk-dropdown variant="primary" trigger-text="Wand Cores">
  <tk-icon class="mr-2x" name="folder" slot="trigger-icon" size="xs"></tk-icon>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Unicorn tail hair
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Dragon heartstring
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Phoenix feather
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

The trigger-icon slot allows you to add an icon before a dropdown trigger. We discourage using an icon unless working with a high-level navigation element.

Icon only trigger

<tk-dropdown trigger-type="icon">
  <tk-icon name="sentiment--positive" color="multi" slot="trigger-icon"></tk-icon>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Freshly mown grass
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      New parchment
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Spearmint toothpaste
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

The trigger-icon slot allows you to define the dropdown trigger’s icon. We discourage using this icon only style unless working with a high-level navigation element.

Action

<tk-dropdown trigger-type="action" button-label="See Howler options">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Send a Howler
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Recieve a Howler
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Delete a Howler
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

The three dots icon is used to infer that more actions can be found in this dropdown. When using the Action component ensure there are at least two or more items in the dropdown. If there are multiple versions of this dropdown (e.g., you’re using it within a tk-list-row ), then you’ll need to set a unique aria-label for each one via the label property. This will make the actions distinguishable for a screen reader. When the label property is unset, the aria-label defaults to More options.

Insight

Users quickly and easily understood what the “...” icon meant

Variant: Light

<tk-dropdown trigger-type="action" light="true">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Purchase a broom
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Sell a broom
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Report damaged broom
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

Should only be used on dark backgrounds that maintain a minimum color contrast ratio of 4.5. Can be used on the default dropdown as well. When using the Action component ensure there are at least two or more items in the dropdown.

Variant: Primary

<tk-dropdown variant="primary" trigger-text="New">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Spell
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Charm
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

This style uses our primary brand color to draw attention. It should only be used to convey primary actions.

Variant: Secondary

<tk-dropdown variant="secondary" trigger-text="New">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Spell
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item active>
    <button class="dropdown__link" type="button">
      Charm
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

This style uses our button pattern and usually appears next to other buttons. The dropdown button uses the secondary action pattern.

Variant: Outline

<tk-dropdown variant="outline" trigger-text="New">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Spell
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Charm
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

Outline dropdowns visually work best sitting next to form fields. This option is a more subtle version of the Primary and Secondary variant dropdowns.

Disabled

<tk-dropdown trigger-text="Contact Newt Scamander" is-disabled>
</tk-dropdown>

Description

Our default disabled style for dropdown buttons.

Active

<tk-dropdown trigger-text="George Weasley">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Fred Weasley
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item active>
    <button class="dropdown__link" type="button">
      George Weasley
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

The active state should only be used when the selected option is reflected in the dropdown trigger. It displays a checkmark so that the list is easier to visually scan.

Subheader and Subtext

My organizations

<tk-dropdown trigger-text="My Account">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Hogsmeade Status
      <span class="dropdown__subtext">Permission slips and waivers</span>
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Triwizard Tournament
      <span class="dropdown__subtext">Match information and standings</span>
    </button>
  </tk-dropdown-item>
  <hr class="dropdown__rule">
  <p class="dropdown__subheader">
    My organizations
  </p>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Quidditch Team
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      S.P.E.W.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

When a dropdown item requires more information you can use the subheader and subtext pattern to add context to the items in the dropdown.

Account Menu

Sirius Black

padfoot@hogwarts.edu

O.W.L.s

<tk-dropdown light trigger-type="avatar" full-height="true" trigger-text="SB">
  <tk-dropdown-header>
    <p class="t-base t-heavy mb-0x" slot="header-title">Sirius Black</p>
    <p slot="header-subtitle">padfoot@hogwarts.edu</p>
  </tk-dropdown-header>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Course schedule
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <a class="dropdown__link" href="#">
      O.W.L.s
    </a>
  </tk-dropdown-item>
  <tk-dropdown-footer>
    <tk-dropdown-item>
      <button class="dropdown__link" type="button">
        Sign Out
      </button>
    </tk-dropdown-item>
  </tk-dropdown-footer>
</tk-dropdown>

Description

The account menu is used in the main app header for both customers and testers. Usually contains navigational items that link to top-level pages across the app.

Menu Position

<tk-dropdown trigger-text="Default">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      The default is to display the menu to the bottom right.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

<hr>

<tk-dropdown position="bottom-left" trigger-text="Bottom Left Dropdown">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      For the rare cases you need it, this positions the menu to the bottom left.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

<hr>

<tk-dropdown position="left" trigger-text="Left Dropdown">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      This will be to the left of the trigger.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

<hr>

<tk-dropdown position="right" trigger-text="Right Dropdown">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      This will be to the right of the trigger.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

<hr>

<tk-dropdown position="top-left" trigger-text="Top Left Dropdown">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      This will be above and to the left of the trigger.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

<hr>

<tk-dropdown position="top-right" trigger-text="Top Right Dropdown">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      This will be above and to the right of the trigger.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

Generally we want to use the default positioning, so that the menu is anchored to the trigger icon. However, in certain instances, you may need to position the menu, such as the in the bulk selector pattern.

Click Options

<tk-dropdown position="top-right" close-trigger="outsideClick" trigger-text="Outside Click (default)">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      This will close with a click outside the menu.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

<hr>

<tk-dropdown position="top-right" close-trigger="insideClick" trigger-text="Inside Click">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      This will close with a click inside the menu.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

<hr>

<tk-dropdown position="top-right" close-trigger="anyClick" trigger-text="Any Click">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      This will close with any click.
    </button>
  </tk-dropdown-item>
</tk-dropdown>

Description

The account menu is used in the main app header for both customers and testers. Usually contains navigational items that link to top-level pages across the app.

Plain HTML - Disabled

<div class="drop-menu">
  <div class="dropdown">
    <select class="dropdown__trigger" disabled>
        <option value="Value1">Dropdown Option</option>
        <option value="Value2">Dropdown Option</option>
        <option value="Value3">Dropdown Option</option>
    </select>
  </div>
</div>

Description

Use the disabled pattern to block usage of a dropdown text element.

Usage

Do

Include clear and concise actions to take or pages to navigate to
Use expanded dropdowns to provide additional information

Don't

Hide primary actions within dropdowns
Add a lot of items to a dropdown list

Events

Name	Description
`close`	Emitted whenever the dropdown menu is closed.

Accessibility

Receives :focus
<a> is used when there is a need to navigate to another page or view. If you use <a> please add tabindex="0".
<button> is used when there is a need for the user to take an action that requires a submit.
<select> is used when users must make a choice within a form.