details-menu

back edit

<details-menu> for navigation

Items must be marked as role="menuitem"

This demo uses Dropdown from Primer CSS.

<details class="d-inline-block dropdown details-reset details-overlay">
  <summary class="btn">
    <img src="https://github.com/octocat.png" alt="" class="avatar" width="16"> @octocat
    <span class="dropdown-caret"></span>
  </summary>
  <details-menu class="dropdown-menu dropdown-menu-se">
    <a role="menuitem" href="#Profile" class="dropdown-item btn-link">Profile</a>
    <a role="menuitem" href="#Stars" class="dropdown-item btn-link">Stars</a>
    <a role="menuitem" href="#Setting" class="dropdown-item btn-link">Setting</a>
  </details-menu>
</details>

<details-menu> for form submission

With <button type="submit"> as menu items, this will submit a form on item selection.

This demo uses SelectMenu from Primer CSS.

<form action="https://httpbin.org/get">
  <details class="d-inline-block details-reset details-overlay">
    <summary class="btn">Select user <span class="dropdown-caret"></span></summary>
    <details-menu class="SelectMenu">
      <div class="SelectMenu-modal">
        <button type="submit" name="user_id" class="SelectMenu-item" value="1" role="menuitem">octocat #1</button>
        <button type="submit" name="user_id" class="SelectMenu-item" value="2" role="menuitem">octocat #2</button>
        <button type="submit" name="user_id" class="SelectMenu-item" value="3" role="menuitem">octocat #3</button>
      </div>
    </details-menu>
  </details>
</form>

<details-menu> as a form participant

Use this for a styled <select> with HTML options.

<form action="https://httpbin.org/get">
  <details class="d-inline-block details-reset details-overlay">
    <summary class="btn">
      User:
      <span data-menu-button class="text-normal">octocat #2</span>
      <span class="dropdown-caret"></span>
    </summary>
    <details-menu class="SelectMenu">
      <div class="SelectMenu-modal">
        <label tabindex="0" role="menuitemradio" class="SelectMenu-item text-normal" aria-checked="false">
          <input type="radio" name="user_id" value="1" hidden>
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          <span data-menu-button-text>octocat #1</span>
        </label>
        <label tabindex="0" role="menuitemradio" class="SelectMenu-item text-normal" aria-checked="true">
          <input type="radio" name="user_id" value="2" hidden checked>
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          <span data-menu-button-text>octocat #2</span>
        </label>
        <label tabindex="0" role="menuitemradio" class="SelectMenu-item text-normal" aria-checked="false">
          <input type="radio" name="user_id" value="3" hidden>
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          <span data-menu-button-text>octocat #3</span>
        </label>
      </div>
    </details-menu>
  </details>
  <button type="submit" class="btn">Save</button>
</form>

[data-menu-input]

Use data-menu-input when the form can not contain <details-menu>. button[value] will be synced to the target input.

<details class="d-inline-block details-reset details-overlay mr-3">
  <summary class="btn">Select user <span class="dropdown-caret"></span></summary>
  <details-menu class="SelectMenu" data-menu-input="targetid">
    <div class="SelectMenu-modal">
      <header class="SelectMenu-header">
        <div class="SelectMenu-title">Users</div>
      </header>
      <div class="SelectMenu-list">
        <button type="button" class="SelectMenu-item" value="1" role="menuitemradio">
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          octocat #1
        </button>
        <button type="button" class="SelectMenu-item" value="2" role="menuitemradio">
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          octocat #2
        </button>
        <button type="button" class="SelectMenu-item" value="3" role="menuitemradio">
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          octocat #3
        </button>
      </div>
    </div>
  </details-menu>
</details>
<form action="https://httpbin.org/get" class="d-inline-block">
  User ID: <input id="targetid" name="user_id" required class="form-control">
  <button type="submit" class="btn">Save</button>
</form>

[data-menu-max-options]

Use [data-menu-max-options] to enforce number of items selectable on the client side. Be sure to also enforce this on the server side as well.

An [data-menu-max-options-warning] element is required, so users are informed why the items are disabled. This interaction requires label[role="menuitemcheckbox"] input[type="checkbox"]

<details class="d-inline-block details-reset details-overlay">
  <summary class="btn">
    Accounts
    <span class="dropdown-caret"></span>
  </summary>
  <details-menu class="SelectMenu" data-menu-max-options="2">
    <div class="SelectMenu-modal">
      <header class="SelectMenu-header">
        <div class="SelectMenu-title">Accounts</div>
      </header>
      <div class="SelectMenu-list">
        <label tabindex="0" role="menuitemcheckbox" class="SelectMenu-item text-normal" aria-checked="false">
          <input type="checkbox" name="user_id" value="1" hidden>
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          octocat #1
        </label>
        <label tabindex="0" role="menuitemcheckbox" class="SelectMenu-item text-normal" aria-checked="true">
          <input type="checkbox" name="user_id" value="2" hidden checked>
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          octocat #2
        </label>
        <label tabindex="0" role="menuitemcheckbox" class="SelectMenu-item text-normal" aria-checked="false">
          <input type="checkbox" name="user_id" value="3" hidden>
          <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %>
          octocat #3
        </label>
      </div>
      <div data-menu-max-options-warning class="flash-warn SelectMenu-footer" hidden>Select up to 2 items.</div>
    </div>
  </details-menu>
</details>