Base by AppDirect

Navigate

Guide users through the application

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

Example Class Code
.adb-context_menu.adb-js-context_menu 
<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">
          aut odit aut fugit sed
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia consequuntur magni dolores eos
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          qui ratione voluptatem sequi nesciunt
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          neque dolorem ipsum quia dolor
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          sit amet consectetur adipisci velit
        </a>
      </li>
    </ul>
  </div>
</menu>
.adb-button__inset 
<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">
          corporis nemo enim ipsam voluptatem
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia voluptas sit suscipit laboriosam
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          nisi ut aliquid ex ea
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          commodi consequatur quis autem vel
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          eum iure reprehenderit qui in
        </a>
      </li>
    </ul>
  </div>
</menu>
.adb-button__secret 
<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">
          quas molestias excepturi sint occaecati
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          cupiditate non provident sed ut
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          perspiciatis unde omnis iste natus
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          error similique sunt in culpa
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          qui officia deserunt mollitia animi
        </a>
      </li>
    </ul>
  </div>
</menu>
.adb-context_menu__dark 
<menu class="adb-context_menu adb-js-context_menu adb-context_menu__dark">
  <button class="adb-context_menu--trigger adb-js-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">
          nihil impedit quo porro quisquam
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          est qui minus id quod
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          maxime placeat facere possimus omnis
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          voluptas assumenda est omnis dolor
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          repellendus temporibus autem quibusdam et
        </a>
      </li>
    </ul>
  </div>
</menu>
.adb-context_menu__dark .adb-button__inset 
<menu class="adb-context_menu adb-js-context_menu adb-context_menu__inset_dark">
  <button class="adb-context_menu--trigger adb-js-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">
          et voluptates repudiandae sint et
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          molestiae non recusandae itaque earum
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          rerum hic tenetur a sapiente
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          delectus ut aut reiciendis voluptatibus
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          maiores doloribus asperiores repellat repellat
        </a>
      </li>
    </ul>
  </div>
</menu>

Text Sizes

Like Text Inputs and Dropdown Selectors Context Menus can preserve the default outer height. The inner font-sizing will match the default sizing. This effect might be useful for emphasising indvidual Context Menus. 

<menu class="adb-context_menu adb-context_menu__sized_small adb-js-context_menu">
  <button class="adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
    Open Small 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__large">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          et voluptates repudiandae sint et
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          molestiae non recusandae itaque earum
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          rerum hic tenetur a sapiente
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          delectus ut aut reiciendis voluptatibus
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          maiores doloribus asperiores repellat repellat
        </a>
      </li>
    </ul>
  </div>
</menu>

<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">
          aut odit aut fugit sed
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia consequuntur magni dolores eos
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          qui ratione voluptatem sequi nesciunt
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          neque dolorem ipsum quia dolor
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          sit amet consectetur adipisci velit
        </a>
      </li>
    </ul>
  </div>
</menu>

<menu class="adb-context_menu adb-context_menu__sized_large adb-js-context_menu">
  <button class="adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
    Open Large 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__large">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          corporis nemo enim ipsam voluptatem
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia voluptas sit suscipit laboriosam
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          nisi ut aliquid ex ea
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          commodi consequatur quis autem vel
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          eum iure reprehenderit qui in
        </a>
      </li>
    </ul>
  </div>
</menu>

<menu class="adb-context_menu adb-context_menu__sized_xlarge adb-js-context_menu">
  <button class="adb-context_menu--trigger adb-js-context_menu--trigger" type="button">
    Open X-Large 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__large">
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quas molestias excepturi sint occaecati
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          cupiditate non provident sed ut
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          perspiciatis unde omnis iste natus
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          error similique sunt in culpa
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          qui officia deserunt mollitia animi
        </a>
      </li>
    </ul>
  </div>
</menu>

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.

Example Class Code
Default: data-placement="left" 
<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">
          nihil impedit quo porro quisquam
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          est qui minus id quod
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          maxime placeat facere possimus omnis
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          voluptas assumenda est omnis dolor
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          repellendus temporibus autem quibusdam et
        </a>
      </li>
    </ul>
  </div>
</menu>
data-placement="right" 
<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">
          et voluptates repudiandae sint et
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          molestiae non recusandae itaque earum
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          rerum hic tenetur a sapiente
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          delectus ut aut reiciendis voluptatibus
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          maiores doloribus asperiores repellat repellat
        </a>
      </li>
    </ul>
  </div>
</menu>

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.

Example Class Code
data-placement="top" 
<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">
          aut odit aut fugit sed
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia consequuntur magni dolores eos
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          qui ratione voluptatem sequi nesciunt
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          neque dolorem ipsum quia dolor
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          sit amet consectetur adipisci velit
        </a>
      </li>
    </ul>
  </div>
</menu>
data-placement="top right" 
<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">
          corporis nemo enim ipsam voluptatem
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          quia voluptas sit suscipit laboriosam
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          nisi ut aliquid ex ea
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          commodi consequatur quis autem vel
        </a>
      </li>
      <li class="adb-stack--item">
        <a class="adb-link__option adb-stack--item_content">
          eum iure reprehenderit qui in
        </a>
      </li>
    </ul>
  </div>
</menu>

Results featuring multi-line content are best used with short descriptions and details and overall in moderation. Labels above the menu may provide a better way to explain the menu content.

Important: The multi-content will be hidden on phone viewports.

 
<menu class="adb-js-context_menu adb-context_menu adb-context_menu__full_width" data-placement="bottom">
                    <button class="adb-button adb-js-context_menu--trigger adb-context_menu--trigger" type="button">
                      Maxime placeat facere possimus omnis
                    </button>
                    <div class="adb-container adb-context_menu--menu adb-context_menu--menu__full_width 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">
                            <span>
                              Voluptas assumenda est omnis dolor
                            </span>
                            <div class="adb-show-small-up">
                              <div class="adb-subtitle">
                                Repellendus temporibus autem quibusdam et. aut consequatur vel illum qui. dolorem eum fugiat quo voluptas. nulla pariatur at vero eos. et accusamus officiis debitis aut
                              </div>
                            </div>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </menu>