Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
Introduction
Buttons with the [data-dropdown] attribute can open and close a dropdown with the corresponding [id].
States
A disabled dropdown item prevents user interaction. For link items, use the .is-disabled class.
<div class="ts-dropdown is-visible">
<button class="item">Communication</button>
<button class="item" disabled>Travel History</button>
<a class="item is-disabled">Navigation</a>
</div>A dropdown menu value can be selected as the input value.
<div class="ts-dropdown is-visible">
<button class="item">Delay for 5 minutes</button>
<button class="item is-selected">Delay for 1 hour</button>
<button class="item">Delay forever</button>
</div>Structure
A dropdown menu can contain a description.
<div class="ts-dropdown is-visible">
<button class="item">
Download
<span class="description">Ctrl + D</span>
</button>
<button class="item">
Save Image
<span class="description">Ctrl + S</span>
</button>
<button class="item">
Select All
<span class="description">Ctrl + A</span>
</button>
</div>A dropdown menu can contain a header.
Taiwan
Hong Kong
<div class="ts-dropdown is-visible">
<div class="header">Taiwan</div>
<button class="item">Kaohsiung</button>
<button class="item">Taipei</button>
<div class="header">Hong Kong</div>
<button class="item">Kowloon Tong</button>
<button class="item">Yuen Long</button>
</div>A dropdown menu can contain dividers to separate related content.
<div class="ts-dropdown is-visible">
<button class="item">Game Settings</button>
<button class="item">Scan and Fix</button>
<div class="divider"></div>
<button class="item">Delete Game</button>
</div>Variations
The dropdown item can be separated by gaps.
<div class="ts-dropdown is-separated is-visible">
<button class="item">
<span class="ts-icon is-user-icon"></span> Users
</button>
<button class="item is-active">
<span class="ts-icon is-house-icon"></span> Home
</button>
<button class="item">
<span class="ts-icon is-newspaper-icon"></span> News
</button>
</div>A dropdown item can be indented to show a hierarchy.
Attack Magic
<div class="ts-dropdown is-visible">
<div class="header">Attack Magic</div>
<button class="item is-indented">Fireball</button>
<button class="item is-indented">Meteor Shower</button>
</div>A dropdown menu can contain an icon.
<div class="ts-dropdown is-start-icon is-visible">
<button class="item">
<span class="ts-icon is-magnifying-glass-icon"></span> Search
</button>
<button class="item">
<span class="ts-icon is-vials-icon"></span> Laboratory
</button>
<button class="item">
<span class="ts-icon is-atom-icon"></span> Atoms
</button>
</div>
<div class="ts-dropdown is-end-icon is-visible" style="margin-left: 11rem">
<button class="item">
Favorites <span class="ts-icon is-heart-icon"></span>
</button>
<button class="item">
Likes <span class="ts-icon is-thumbs-up-icon"></span>
</button>
<button class="item">
Archives <span class="ts-icon is-box-archive-icon"></span>
</button>
</div>A dropdown menu can adjust item height for a tighter or more relaxed look.
<div class="ts-dropdown is-relaxed is-visible">
<button class="item">Relaxed Item</button>
<button class="item is-active">Relaxed Item</button>
<button class="item">Relaxed Item</button>
</div>
<div class="ts-dropdown is-visible" style="margin-left: 11rem">
<button class="item">Default Item</button>
<button class="item is-active">Default Item</button>
<button class="item">Default Item</button>
</div>
<div class="ts-dropdown is-dense is-visible" style="margin-left: 22rem">
<button class="item">Dense Item</button>
<button class="item is-active">Dense Item</button>
<button class="item">Dense Item</button>
</div>Compositions
A dropdown menu can be placed at the end of Topbar.
<div class="ts-app-topbar">
<div class="start">
<div class="item is-text">Application</div>
</div>
<div class="end">
<button class="item" data-dropdown="dropdown-menu">
<span class="ts-icon is-ellipsis-vertical-icon"></span>
</button>
</div>
</div>
<div class="ts-dropdown" id="dropdown-menu" data-position="bottom-end">
<button class="item">About</button>
<button class="item">Check Updates</button>
</div>Consider placing items in a dropdown menu if there are too many in Tab.
<div class="ts-tab is-pilled">
<button class="item">Featured</button>
<button class="item">Latest</button>
<button class="item" data-dropdown="dropdown-links">
<span class="ts-icon is-ellipsis-icon"></span>
More
</button>
</div>
<div class="ts-dropdown" id="dropdown-links">
<button class="item">Games</button>
<button class="item">Music</button>
<button class="item">Videos</button>
</div>Properties
| Description | Default Value | Target | |
|---|---|---|---|
| [data-position] |
The preferred position of the dropdown.
|
bottom-start |
.ts-dropdown |
CSS Variables
| Description | Default Value | Target | |
|---|---|---|---|
| --min-width |
The minimum width of a dropdown. |
10rem |
.ts-dropdown |
