Dropdown
A dropdown is like a digital trapdoor, revealing a hidden world of options with a single click. It's the trusty sidekick of web pages, helping users navigate and make selections with ease. With a dropdown, you can pack a lot of options into a small space, without overwhelming your users.
Examples
<div class="has-dropdown on-hover">
<a href="#" class="btn toggle" type="button" aria-expanded="false">
Dropdown button <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
</svg>
</a>
<div class="dropdown">
<ul class="nav vertical" style="--xii-nav-gap: 1rem;">
<li class="item">
<a class="link active" aria-current="page" href="#">Active</a>
</li>
<li class="item">
<div class="has-dropdown on-hover" style="width:100%">
<a class="link" href="#">Link</a>
<div class="dropdown to-right">
<ul class="nav vertical" style="--xii-nav-gap: 1rem;">
<li class="item">
<a class="link active" aria-current="page" href="#">Active</a>
</li>
<li class="item">
<div class="has-dropdown on-hover">
<a class="link" href="#">Link</a>
</div>
</li>
<li class="item">
<a class="link" href="#">Link</a>
</li>
<li class="item">
<a class="link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</li>
<li class="item">
<a class="link" href="#">Link</a>
</li>
<li class="item">
<a class="link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>@use '~/styles/app.scss' as app;
// Load dropdown component
@include app.generate-components(
$components : (
(
app.get-theme(app.$theme, 'components.dropdown'),
'has-dropdown',
( property: (name : 'dropdown', exclude : ('nav') ))
),
(
app.get-theme(app.$theme, 'components.nav'),
'nav',
)
),
$config : app.$config,
$theme : app.$theme,
);