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" current="true" 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.

Pre-Trigger Icon

<tk-dropdown variant="primary" pre-trigger-icon="apps" trigger-text="Wand Cores">
  <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

This adds an icon before a dropdown trigger. We discourage using an icon unless working with a high-level navigation element.

Action

<tk-dropdown trigger-type="action">
  <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

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: Button

<tk-dropdown variant="button" trigger-text="Created By">
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      Fred Weasley
    </button>
  </tk-dropdown-item>
  <tk-dropdown-item>
    <button class="dropdown__link" type="button">
      George Weasley
    </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: 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.

Disabled

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

Description

Our default disabled style for dropdown buttons.

Subheader and Subtext

<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 current="true">
    <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 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 current="true">
    <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.

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.