Dependencies
This layout uses the following components as 'atoms' to create the full UI.
Uses: JS:Dropdown
Basic default themed dropdown example.
<!-- Container -->
<div
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<!-- Button -->
<button class="c-btn" type="button" aria-controls="dropdown_1" aria-expanded="false"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
Toggle
<svg class="c-icon | u-ml-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown" id="dropdown_1" style="display: none;"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">On this page:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 1</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 2</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 3</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 4</a>
</li>
</ul>
</div>
</div>Horizontal Alignment
Align the dropdown either left to right, or right to left. Dropdowns auto-magically drop up in case there’s not enough browser space to accommodate bottom placement.
<!-- Add modifier to the directive -->
<div class="c-dropdown" x-anchor.bottom-start.offset.10="$refs.btn">...</div><!-- Add modifier to the directive -->
<div class="c-dropdown" x-anchor.bottom-end.offset.10="$refs.btn">...</div> Useable modifiers:
.bottom.bottom-start.bottom-end.top.top-start.top-end.left.left-start.left-end.right.right-start.right-end
Dropdown Areas
Header, footer and segmented areas can be used within the dropdown.
<div class="o-grid | u-justify-center u-h-10 u-mt-lg">
<div class="o-grid__item | u-w-content">
<div class="u-inline-block"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<!-- Button -->
<button class="c-btn" type="button" aria-controls="dropdown_head" aria-expanded="false"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
Toggle
<svg class="c-icon | u-ml-xs" viewBox="0 0 16 16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown" id="dropdown_header" style="display: none;"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">Header:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 1</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 2</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 3</a>
</li>
</ul>
</div>
</div>
</div>
</div><div class="o-grid | u-justify-center u-h-10 u-mt-lg">
<div class="o-grid__item | u-w-content">
<div class="u-inline-block"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<!-- Button -->
<button class="c-btn" type="button" aria-controls="dropdown_footer" aria-expanded="false"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
Toggle
<svg class="c-icon | u-ml-xs" viewBox="0 0 16 16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown" id="dropdown_footer" style="display: none;"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 1</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 2</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 3</a>
</li>
</ul>
<div class="c-dropdown__footer">
<span class="c-dropdown__heading">Footer</span>
</div>
</div>
</div>
</div>
</div>Segmented Areas
Break up sections of the dropdown into different areas using a <hr>.
<div class="o-grid | u-justify-center u-h-10 u-mt-lg">
<div class="o-grid__item | u-w-content">
<div class="u-inline-block"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<!-- Button -->
<button class="c-btn" type="button" aria-controls="dropdown_group" aria-expanded="false"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
Toggle
<svg class="c-icon | u-ml-xs" viewBox="0 0 16 16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown | u-absolute" id="dropdown_group" style="display: none;"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">Header</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Group 1 - 1</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Group 1 - 2</a>
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<hr class="c-rule | u-flex-fill u-my-xs u-nmx-sm u-w-100%">
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Group 2 - 1</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Group 2 - 2</a>
</li>
</ul>
</div>
</div>
</div>
</div>Events
Change the click to a mouse hover event with a timeout.
<div class="o-grid | u-justify-center u-h-10 u-mt-lg">
<div class="o-grid__item | u-w-content">
<div class="u-inline-block"
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<!-- Button -->
<button class="c-btn" type="button" aria-expanded="false" aria-controls="dropdown_click"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
Toggle
<svg class="c-icon | u-ml-xs" viewBox="0 0 16 16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown" id="dropdown_click"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">On this page:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 1</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 2</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 3</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 4</a>
</li>
</ul>
</div>
</div>
</div>
</div><div class="o-grid | u-justify-center u-h-10 u-mt-lg">
<div class="o-grid__item | u-w-content">
<!-- Add mouse events which trigger the dropdown on the container. -->
<div class="u-inline-block"
x-data="{ drop: false, timeout: null }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
@mouseenter="drop = true; clearTimeout(timeout)"
@mouseleave="timeout = setTimeout(()=> { drop = false }, 333)"
>
<!-- Button -->
<button class="c-btn" type="button" aria-expanded="false" aria-controls="dropdown_hover"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
Toggle
<svg class="c-icon | u-ml-xs" viewBox="0 0 16 16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown" id="dropdown_hover"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="c-dropdown__heading">On this page:</span>
</div>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 1</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 2</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 3</a>
</li>
<li class="c-dropdown__item | o-list__item">
<a class="c-dropdown__link" href="#URL">Item 4</a>
</li>
</ul>
</div>
</div>
</div>
</div>Example Dropdowns
A selection of example dropdowns, when used with other components.
Signed in as: tom@listers.co.uk
<!-- Container (can be anything) -->
<div
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<!-- Button -->
<button class="c-btn" type="button" aria-controls="dropdown_team" aria-expanded="false" aria-label="Open and Close Team Menu"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M5.5 7a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z" clip-rule="evenodd"/>
<path fill="none" stroke-width="1.5" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Z"/>
<path fill-rule="evenodd" d="M3.75 11.62A6.82 6.82 0 0 1 8 10.25c1.73 0 3.33.56 4.4 1.5.47.41.6 1 .45 1.5a1.7 1.7 0 0 1-1.01 1.08L8.5 15s-.6.16-1 0-3.17-.61-3.17-.61a1.8 1.8 0 0 1-1.1-1.17 1.5 1.5 0 0 1 .52-1.6Z" clip-rule="evenodd"/>
</svg>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown" id="dropdown_team" style="display: none;"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked | u-space-y-sm">
<li class="c-dropdown__item | o-list__item | u-flex">
<a class="c-link-bare | o-media u-gap-sm u-w-100%" href="#01">
<div class="c-avatar c-avatar--sm | o-media__img | u-mr-sm">
<img class="c-avatar__img c-img" src="/assets/img/ds/components/avatars/avatar_1.webp" loading="lazy" width="40" height="40" alt="Image of the user {NAME}">
</div>
<div class="o-media__body o-split | u-flex u-fs-sm u-align-middle u-flex-fill">
<span class="o-split__left">
<span class="u-trunc">Name</span>
<span class="u-fs-xs u-tc-slate-600 u-trunc">name@company.co.uk</span>
</span>
<svg class="c-icon | u-ml-sm" fill="none" fill-rule="evenodd" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m5.166 10.833 1.417 1.417 4.25-4.241-4.25-4.259L5.17 5.163 8 8.009z"/>
</svg>
</div>
</a>
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<a class="c-link-bare | o-media u-gap-sm u-w-100%" href="#01">
<div class="c-avatar c-avatar--sm | o-media__img | u-mr-sm">
<img class="c-avatar__img c-img" src="/assets/img/ds/components/avatars/avatar_4.webp" loading="lazy" width="40" height="40" alt="Image of the user {NAME}">
</div>
<div class="o-media__body o-split | u-flex u-fs-sm u-align-middle u-flex-fill">
<span class="o-split__left">
<span class="u-trunc">Name</span>
<span class="u-fs-xs u-tc-slate-600 u-trunc">name@company.co.uk</span>
</span>
<svg class="c-icon | u-ml-sm" fill="none" fill-rule="evenodd" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m5.166 10.833 1.417 1.417 4.25-4.241-4.25-4.259L5.17 5.163 8 8.009z"/>
</svg>
</div>
</a>
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<a class="c-link-bare | o-media u-gap-sm u-w-100%" href="#01">
<div class="c-avatar c-avatar--sm | o-media__img | u-mr-sm">
<img class="c-avatar__img c-img" src="/assets/img/ds/components/avatars/avatar_5.webp" loading="lazy" width="40" height="40" alt="Image of the user {NAME}">
</div>
<div class="o-media__body o-split | u-flex u-fs-sm u-align-middle u-flex-fill">
<span class="o-split__left">
<span class="u-trunc">Name</span>
<span class="u-fs-xs u-tc-slate-600 u-trunc">name@company.co.uk</span>
</span>
<svg class="c-icon | u-ml-sm" fill="none" fill-rule="evenodd" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m5.166 10.833 1.417 1.417 4.25-4.241-4.25-4.259L5.17 5.163 8 8.009z"/>
</svg>
</div>
</a>
</li>
</ul>
</div>
</div><!-- Container (can be anything) -->
<div
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<!-- Button -->
<button class="c-btn" type="button" aria-controls="dropdown_account" aria-expanded="false" aria-label="Open Account Menu"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
:aria-label="drop == false ? 'Open Account Menu': 'Close Account Menu'"
>
<svg class="c-icon | u-ml-xxs" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M5.5 7a2.5 2.5 0 1 1 5 0 2.5 2.5 0 0 1-5 0Z" clip-rule="evenodd"/>
<path fill="none" stroke-width="1.5" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Z"/>
<path fill-rule="evenodd" d="M3.75 11.62A6.82 6.82 0 0 1 8 10.25c1.73 0 3.33.56 4.4 1.5.47.41.6 1 .45 1.5a1.7 1.7 0 0 1-1.01 1.08L8.5 15s-.6.16-1 0-3.17-.61-3.17-.61a1.8 1.8 0 0 1-1.1-1.17 1.5 1.5 0 0 1 .52-1.6Z" clip-rule="evenodd"/>
</svg>
<svg class="c-icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"></path>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown" id="dropdown_account" style="display: none;"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<ul class="c-dropdown__list | o-list-stacked">
<li class="c-dropdown__item | o-list__item | u-flex">
<a class="c-link-bare | o-media u-gap-sm u-w-100%" href="#03">
<div class="c-avatar c-avatar--sm | o-media__img | u-mr-sm">
<img class="c-avatar__img c-img" src="/assets/img/ds/components/avatars/avatar_1.webp" loading="lazy" width="40" height="40" alt="Image of the user {NAME}">
</div>
<div class="o-media__body o-split | u-flex u-fs-sm u-align-middle u-flex-fill">
<span class="o-split__left">
<span class="u-trunc">Name</span>
<span class="u-fs-xs u-tc-slate-600 u-block">user@company.co.uk</span>
</span>
</div>
</a>
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<label class="c-label c-label--inline | u-w-100% u-mb-xs u-mt-sm" for="search">
<span class="c-label__text | u-pl-sm u-flex u-align-middle">
<span class="u-hidden">Search</span>
<svg class="c-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14 14-3.465-3.464m0 0a5 5 0 1 0-7.07-7.071 5 5 0 0 0 7.07 7.07h0Z"/>
</svg>
</span>
<span class="c-label__input">
<input class="c-input c-input--sm c-input--search" id="search" type="search">
</span>
</label>
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<hr class="c-rule | u-flex-fill u-my-xs u-nmx-sm u-w-100%">
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<a class="c-dropdown__link" href="#04">
<svg class="c-icon | u-mr-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7.294A2.772 2.772 0 1 0 8 1.75a2.772 2.772 0 0 0 0 5.544Zm-4.395 6.823h8.789c.974 0 1.724-.838 1.27-1.699-.67-1.267-2.195-2.779-5.665-2.779-3.469 0-4.994 1.512-5.663 2.78-.455.86.295 1.698 1.269 1.698Z"/>
</svg>
Account
</a>
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<a class="c-dropdown__link" href="#05">
<svg class="c-icon | u-mr-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 3H14M8.75 3a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0M2 3h3.75m2 10H14m-6.25 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0M2 13h2.75m7.5-5H14m-1.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0M2 8h7.25"/>
</svg>
Settings
</a>
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<a class="c-dropdown__link" href="#06">
<svg class="c-icon | u-mr-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-width="1.5" d="M4.462 2h7.077a1.6 1.6 0 0 1 1.556 1.227l.61 2.54A1 1 0 0 1 12.731 7H3.269a1 1 0 0 1-.973-1.233l.61-2.54A1.6 1.6 0 0 1 4.462 2Z" clip-rule="evenodd"/>
<path fill="none" stroke-linejoin="round" stroke-width="1.5" d="M3.632 7h8.736a2 2 0 0 1 1.715.971L15 9.5V12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9.5l.917-1.529A2 2 0 0 1 3.632 7Z" clip-rule="evenodd"/>
<path fill="none" stroke-linecap="round" stroke-width="1.5" d="M4 11h1M1 6h1m12 0h1M3 15h1m8 0h1m-2-4h1"/>
</svg>
Driveway
</a>
</li>
<li class="c-dropdown__item | o-list__item | u-flex">
<a class="c-dropdown__link" href="#07">
<svg class="c-icon | u-mr-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path stroke-width="1.5" d="M7.993 15a7 7 0 1 1 .014-14 7 7 0 0 1-.014 14Z"/>
<path fill-rule="evenodd" d="M8 4.75c-.462 0-.866.25-1.083.626a.75.75 0 0 1-1.298-.752A2.75 2.75 0 0 1 10.75 6a2.75 2.75 0 0 1-1.684 2.536.75.75 0 0 1-.2.053.25.25 0 0 0-.116.211v.7a.75.75 0 1 1-1.5 0v-.7c0-.83.578-1.525 1.354-1.705A1.25 1.25 0 0 0 8 4.75Zm.75 6.75a.75.75 0 0 0-1.5 0v.05a.75.75 0 0 0 1.5 0v-.05Z" clip-rule="evenodd"/>
</svg>
Support
</a>
</li>
</ul>
<div class="c-dropdown__footer">
<a class="c-link-bare | o-split | u-tc-red-800 u-tc:hover-red-900" href="#">
<span class="o-split__left">Sign out</span>
<svg class="c-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 8h7M5 4.5 1.5 8 5 11.5m4.5-10h3.2a1.8 1.8 0 0 1 1.8 1.8v9.4a1.8 1.8 0 0 1-1.8 1.8H9.5h0"></path>
</svg>
</a>
</div>
</div>
</div><!-- Container (can be anything) -->
<div
x-data="{ drop: false }"
@keydown.escape.prevent.stop="drop = false"
@click.outside="drop = false"
>
<!-- Button -->
<button class="c-btn" type="button" aria-expanded="false" aria-controls="dropdown_toggles"
@click="drop = ! drop"
x-ref="btn"
:aria-expanded="drop"
>
Toggle
<svg class="c-icon | u-ml-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.75 3H14M8.75 3a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0M2 3h3.75m2 10H14m-6.25 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0M2 13h2.75m7.5-5H14m-1.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0M2 8h7.25"/>
</svg>
</button>
<!-- Panel -->
<div class="c-dropdown" id="dropdown_toggles" style="display: none;"
x-show="drop"
x-anchor.offset.10="$refs.btn"
x-transition
>
<div class="c-dropdown__head">
<span class="u-fs-sm u-tc-slate-600">Signed in as:</span>
<span class="c-dropdown__heading">tom@listers.co.uk</span>
</div>
<hr class="c-rule | u-mt-xs">
<ul class="c-dropdown__list | o-list-stacked | u-space-y-xs">
<li class="c-dropdown__item | o-list__item">
<label class="o-split" for="wifi">
<span class="o-split__left">
<svg class="c-icon | u-mr-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.525 10.025a3.5 3.5 0 0 1 4.95 0m-7.07-2.121a6.499 6.499 0 0 1 9.191 0M1.283 5.783a9.5 9.5 0 0 1 13.434 0m-6.364 6.364L8 12.8l-.353-.653a.5.5 0 0 1 .706 0Z"/>
</svg>
<span class="u-fs-sm u-fw-500 u-tc-headings">Wi-Fi</span>
</span>
<span class="c-label c-label--switch">
<input class="c-input c-input--switch" type="checkbox" id="wifi">
</span>
</label>
</li>
<li class="c-dropdown__item | o-list__item">
<label class="o-split" for="dark_mode">
<span class="o-split__left">
<svg class="c-icon | u-mr-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.501 10.001a6.5 6.5 0 0 1-8.503-8.503 6.502 6.502 0 1 0 8.503 8.503Z"/>
</svg>
<span class="u-fs-sm u-fw-500 u-tc-headings">Dark Mode</span>
</span>
<span class="c-label c-label--switch">
<input class="c-input c-input--switch" type="checkbox" id="dark_mode">
</span>
</label>
</li>
<li class="c-dropdown__item | o-list__item">
<label class="o-split" for="vat_toggle">
<span class="o-split__left">
<svg class="c-icon | u-mr-xs" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.65 4.6a2.333 2.333 0 0 0-3.97 1.401 1.99 1.99 0 0 0 .022.495l.393 2.754a3.5 3.5 0 0 1-.334 2.061l-.094.189 1.197-.399a1.75 1.75 0 0 1 1.106 0l.51.17c.44.146.92.112 1.335-.095l.518-.26M5.083 8H8m7 0A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
<span class="u-fs-sm u-fw-500 u-tc-headings">VAT Toggle</span>
</span>
<span class="c-label c-label--switch">
<input class="c-input c-input--switch" type="checkbox" id="vat_toggle">
</span>
</label>
</li>
</ul>
</div>
</div>