Athena UI

Dropdowns

Menus for actions, filters, and profile controls.

New Page

Action Menu

Record Actions

Use dropdowns for secondary or contextual actions. Keep the primary action visible outside the menu.

Best Practice

Menu Behaviour

Use buttons for in-page actions and links for navigation.
Separate destructive actions with a divider.
Do not hide the main workflow action inside a dropdown.

Filter Menu

Use checkboxes when users can keep several filters active.

Profile Menu

Profile menus need a clear trigger name and predictable account destinations.

Placement

Use end-aligned menus near the right edge to prevent clipping and keep action lists inside the viewport.

<section class="row g-4">
      <div class="col-xl-7">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-primary mb-3">Action Menu</span>
          <h2 class="h4">Record Actions</h2>
          <p class="text-secondary">Use dropdowns for secondary or contextual actions. Keep the primary action visible outside the menu.</p>
          <div class="d-flex flex-wrap gap-2">
            <button class="btn btn-primary" type="button">Save Record</button>
            <div class="dropdown">
              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">More Actions</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="../pages/profile.html"><i class="bi bi-pencil" aria-hidden="true"></i> Edit Details</a></li>
                <li><a class="dropdown-item" href="../pages/dashboard-blank.html"><i class="bi bi-copy" aria-hidden="true"></i> Duplicate</a></li>
                <li><a class="dropdown-item" href="../pages/activity-log.html"><i class="bi bi-clock-history" aria-hidden="true"></i> View History</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><button class="dropdown-item text-danger" type="button"><i class="bi bi-archive" aria-hidden="true"></i> Archive Record</button></li>
              </ul>
            </div>
          </div>
        </article>
      </div>
      <div class="col-xl-5">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">Best Practice</span>
          <h2 class="h5">Menu Behaviour</h2>
          <ul class="athena-check-list mb-0">
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Use buttons for in-page actions and links for navigation.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Separate destructive actions with a divider.</span></li>
            <li><i class="bi bi-check2" aria-hidden="true"></i><span>Do not hide the main workflow action inside a dropdown.</span></li>
          </ul>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <h2 class="h5">Filter Menu</h2>
          <p class="text-secondary">Use checkboxes when users can keep several filters active.</p>
          <div class="dropdown">
            <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Filter Status</button>
            <div class="dropdown-menu p-3">
              <div class="form-check"><input class="form-check-input" type="checkbox" id="dropdown-filter-active" checked><label class="form-check-label" for="dropdown-filter-active">Active</label></div>
              <div class="form-check"><input class="form-check-input" type="checkbox" id="dropdown-filter-review"><label class="form-check-label" for="dropdown-filter-review">In Review</label></div>
              <div class="form-check"><input class="form-check-input" type="checkbox" id="dropdown-filter-archived"><label class="form-check-label" for="dropdown-filter-archived">Archived</label></div>
            </div>
          </div>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <h2 class="h5">Profile Menu</h2>
          <p class="text-secondary">Profile menus need a clear trigger name and predictable account destinations.</p>
          <div class="dropdown">
            <button class="btn athena-profile-button" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Open Avery Stone account menu">
              <img src="../assets/img/avatar-1.svg" alt="Avery Stone profile photo">
            </button>
            <ul class="dropdown-menu">
              <li><h3 class="dropdown-header">Avery Stone</h3></li>
              <li><a class="dropdown-item" href="../pages/profile.html">Profile</a></li>
              <li><a class="dropdown-item" href="../pages/account-settings.html">Account Settings</a></li>
              <li><a class="dropdown-item" href="../pages/sign-in.html">Sign Out</a></li>
            </ul>
          </div>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="athena-card p-4 h-100">
          <h2 class="h5">Placement</h2>
          <p class="text-secondary">Use end-aligned menus near the right edge to prevent clipping and keep action lists inside the viewport.</p>
          <div class="dropdown text-lg-end">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">Export</button>
            <ul class="dropdown-menu dropdown-menu-lg-end">
              <li><button class="dropdown-item" type="button">Export CSV</button></li>
              <li><button class="dropdown-item" type="button">Export PDF</button></li>
              <li><button class="dropdown-item" type="button">Print View</button></li>
            </ul>
          </div>
        </article>
      </div>
    </section>