Popover menu

What is a popover menu

This is a quick menu that open on click. For menus, we use the three-dot-icon.

This is exactly the same as the navigation menu. The only difference is the popovermenu class.

Basic layout

Popover image example

  1. <div class="popovermenu">
  2.     <ul>
  3.        <li>
  4.            <a href="#" class="icon-details">
  5.                <span>Details</span>
  6.            </a>
  7.        </li>
  8.        <li>
  9.            <button class="icon-close">
  10.                <span>Remove</span>
  11.            </button>
  12.        </li>
  13.        <li>
  14.            <button>
  15.                <span class="icon-favorite"></span>
  16.                <span>Favorite</span>
  17.            </button>
  18.        </li>
  19.        <li>
  20.            <a>
  21.                <span class="icon-rename"></span>
  22.                <span>Edit</span>
  23.            </a>
  24.        </li>
  25.        <li>
  26.            <span class="menuitem">
  27.                <input id="check1" type="checkbox" class="checkbox" />
  28.                <label for="check1">Enable</label>
  29.            </span>
  30.        </li>
  31.        <li>
  32.            <span class="menuitem">
  33.                <input id="radio1" type="radio" class="radio" />
  34.                <label for="radio1">Select</label>
  35.            </span>
  36.        </li>
  37.         <li>
  38.             <span class="menuitem">
  39.                 <span class="icon icon-user"></span>
  40.                 <form>
  41.                         <input id="input-folder" type="text" value="new email">
  42.                         <input type="submit" value=" " class="primary icon-checkmark-white">
  43.                 </form>
  44.             </span>
  45.         </li>
  46.          <li>
  47.              <span class="menuitem">
  48.                  <span class="icon icon-folder"></span>
  49.                  <form>
  50.                          <input id="input-folder" type="text" value="New folder">
  51.                          <input type="submit" value=" " class="icon-confirm">
  52.                  </form>
  53.              </span>
  54.          </li>
  55.     </ul>
  56. </div>

Technical details

  • The only allowed menu items elements are a, button and span for the checkbox and radio only.
  • You can mix between a and button on the same menu (in case of form or direct link) like the example above
  • You need to put the entire menu just after the three dot icon <div><span class="icon-more"></span><div class="popovermenu">...</div></div>
  • You do not need JS, CSS only is ok for positioning. JS is still required to handle the hide/show.
  • Only one ul is allowed.
  • Only one level of menu is allowed.
  • Every entry needs to have its own icon. This greatly improves the UX.
  • The required right distance to the border (or padding, whatever you want to use) of the three-dot icon should be 14px (5 for menu margin and 6 for arrow position)
  • The span element must have the menuitem class.
  • The checkbox/radio must use the nextcloud custom
  • The form element is optionnal if you’re using inputs.
  • Supported inputs are all text based ones and buttons type ones

../_images/popover-position.png

Alignment

If you want to align your menu, you can add the class to the main popovermenu div.

  • Center: menu-center
  • Left: menu-left
  • Right is by default