Dropdown

Menu overlays for actions, filters, account menus, and compact navigation.

Each example uses Sass v2 classes directly while the page still renders through the normal Header/Body/Footer service_3_modern section.

Component

Basic dropdown

The menu is hidden by default; the Sass v2 dropdown module toggles the active class on click.

Component
Basic dropdown html
<div class="antsand-dropdown">
  <button class="antsand-dropdown-toggle" type="button">Options</button>
  <div class="antsand-dropdown-menu">
    <a class="antsand-dropdown-item" href="#">Edit</a>
  </div>
</div>

Right aligned menu

Use right alignment for account menus and topnav edge cases.

Component
Right aligned menu html
<div class="antsand-dropdown">
  <button class="antsand-dropdown-toggle" type="button">Account</button>
  <div class="antsand-dropdown-menu antsand-dropdown-menu-right">...</div>
</div>