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,
);