Base by AppDirect | Context Menus

Context Menus

Menus are visually similar to dropdown selectors but they are functionally different. Menus offer a list of commands or links, each of which allows the user to take an action or navigate to a different page. By contrast, dropdown selectors offer a set of options for a choice the user must make. Accordingly, the markup for menus is different from the markup for dropdown selectors.

Styles

<menu class="adb-context_menu adb-js-context_menu">
  <button class="adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          animi provident fugit
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          tenetur quia id
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          sed commodi ipsa
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          veritatis reiciendis aut
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          voluptatibus iusto non
        </a>
      </li>
    </ul>
  </div>
</menu>

<menu class="adb-js-context_menu adb-context_menu">
  <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__inset" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          omnis ab non
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          facilis autem officia
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          neque cumque adipisci
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          laudantium ut beatae
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia cupiditate accusamus
        </a>
      </li>
    </ul>
  </div>
</menu>

<menu class="adb-js-context_menu adb-context_menu">
  <button class="adb-js-context_menu--trigger adb-context_menu--trigger adb-button__secret" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          odit voluptatem asperiores
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          in harum incidunt
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          qui esse qui
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          vero totam aut
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          dignissimos autem autem
        </a>
      </li>
    </ul>
  </div>
</menu>

Sizes

<menu class="adb-context_menu adb-js-context_menu">
  <button class="adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          maiores soluta ratione
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          vel rerum ipsam
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          aut sed dicta
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          nam odio autem
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          velit non eligendi
        </a>
      </li>
    </ul>
  </div>
</menu>

<menu class="adb-context_menu adb-context_menu__small adb-js-context_menu">
  <button class="adb-button__small adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack adb-stack__small">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          voluptatem aut reiciendis
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia explicabo reiciendis
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          voluptatum quisquam eius
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          et ipsum repellat
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          facilis sit a
        </a>
      </li>
    </ul>
  </div>
</menu>

<menu class="adb-context_menu adb-context_menu__full_width adb-js-context_menu">
  <button class="adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          ipsa et in
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          sint dolorum distinctio
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          reiciendis ad sunt
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          aut temporibus id
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          et omnis vero
        </a>
      </li>
    </ul>
  </div>
</menu>

Bottom Menu Placement

This is the default menu placement. Use the .right aligned placement when the menu is positioned within the last 4 columns (264px) of the page.

<menu class="adb-context_menu adb-js-context_menu">
  <button class="adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quas illo quae
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          sunt sunt autem
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quo voluptatibus ducimus
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          ex beatae aspernatur
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          eum deleniti et
        </a>
      </li>
    </ul>
  </div>
</menu>

<menu class="adb-js-context_menu adb-context_menu" data-placement="right">
  <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          omnis deleniti quam
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          soluta sed voluptatem
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          tempora laboriosam omnis
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          et eaque magni
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          et aut provident
        </a>
      </li>
    </ul>
  </div>
</menu>

Top Menu Placement

Top menu placement is not ideal in most scenarios and should only be used under special circumstances. Use this menu placement when the menu is placed at the bottom of a table or when menu options run the risk of opening below the viewport. Use the .right aligned placement when the menu is positioned within the last 4 columns (264px) of the page.

<menu class="adb-js-context_menu adb-context_menu" data-placement="top">
  <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          architecto voluptas ipsam
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          iste libero voluptatem
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          voluptas necessitatibus aliquid
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          suscipit maiores qui
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          autem et ipsam
        </a>
      </li>
    </ul>
  </div>
</menu>

<menu class="adb-js-context_menu adb-context_menu" data-placement="top right">
  <button class="adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
    Open Menu
  </button>
  <div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
    <ul class="adb-stack">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          voluptatem tempore quasi
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          aut mollitia pariatur
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          explicabo occaecati recusandae
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          ipsam quis repellendus
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia facere laboriosam
        </a>
      </li>
    </ul>
  </div>
</menu>