Dropdowns are used to present individuals with a wide range of options and actions they can take.
<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>The dropdown text pattern is used when you need a dropdown action in a small space or near another body of 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>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.
<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>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.
<tk-dropdown>
<div slot="trigger-content" class="l-flex l-v-center">
<span>Star</span>
<tk-icon class="ml-2x" name="star" variant="solid" size="xs"></tk-icon>
</div>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Star Wars
</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Star Trek
</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Stardust
</button>
</tk-dropdown-item>
</tk-dropdown>The trigger-content slot allows you the flexibility to add any component or content for the trigger before the chevron icon.
<tk-dropdown trigger-type="icon">
<tk-sentiment-icon sentiment="positive" slot="trigger-icon"></tk-sentiment-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>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.
<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>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<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>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.
<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>This style uses our primary brand color to draw attention. It should only be used to convey primary actions.
<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>This style uses our button pattern and usually appears next to other buttons. The dropdown button uses the secondary action pattern.
<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>Outline dropdowns visually work best sitting next to form fields. This option is a more subtle version of the Primary and Secondary variant dropdowns.
<tk-dropdown trigger-text="Contact" is-disabled>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Newt Scamander
</button>
</tk-dropdown-item>
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Tina Goldstein
</button>
</tk-dropdown-item>
</tk-dropdown>Our default disabled style for dropdown buttons.
<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>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.
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>When a dropdown item requires more information you can use the subheader and subtext pattern to add context to the items in the dropdown.
<tk-dropdown avatar-type="light" trigger-type="avatar" full-height="true" trigger-text="SB">
<tk-dropdown-header>
<h3 class="t-base t-heavy mb-0x" slot="header-title">Sirius Black</h3>
<h4 slot="header-subtitle">padfoot@hogwarts.edu</h4>
</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>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.
<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>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.
<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>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.
<tk-dropdown class="l-sm-block" 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>For times when dropdowns need to stack and/or display full-width on smaller screens, we have classes that provide that functionality. Use l-md-block for screens stacking at medium screensizes and use l-sm-block for stacking at small screensizes.
<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>Use the disabled pattern to block usage of a dropdown text element.
<div style="width: 300px;">
<tk-dropdown full-width variant="primary" trigger-text="Ghouls and Goblins">
<tk-dropdown-item>
<button class="dropdown__link" type="button">
Ghouls
</button>
<button class="dropdown__link" type="button">
Goblins
</button>
</tk-dropdown-item>
</tk-dropdown>
</div>Used to match the width of items in the dropdown menu and trigger to their parent container.
| Name | Description |
|---|---|
close |
Emitted whenever the dropdown menu is closed. |
open |
Emitted whenever the dropdown menu is opened. |
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.
<tk-dropdown> takes a role-type prop with a default value of list which is passed down to <tk-dropdown-menu> and can be overridden to best fit your particular use case.
<tk-dropdown-item> takes a role prop with a default value of listitem which can be overridden to best fit your particular use case.