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
<div class="popovermenu">
    <ul>
       <li>
           <a href="#" class="icon-details">
               <span>Details</span>
           </a>
       </li>
       <li>
           <button class="icon-close">
               <span>Remove</span>
           </button>
       </li>
       <li>
           <button>
               <span class="icon-favorite"></span>
               <span>Favorite</span>
           </button>
       </li>
       <li>
           <a>
               <span class="icon-rename"></span>
               <span>Edit</span>
           </a>
       </li>
       <li>
           <span class="menuitem">
               <input id="check1" type="checkbox" class="checkbox" />
               <label for="check1">Enable</label>
           </span>
       </li>
       <li>
           <span class="menuitem">
               <input id="radio1" type="radio" class="radio" />
               <label for="radio1">Select</label>
           </span>
       </li>
        <li>
            <span class="menuitem">
                <span class="icon icon-user"></span>
                <form>
                        <input id="input-folder" type="text" value="new email">
                        <input type="submit" value=" " class="primary icon-checkmark-white">
                </form>
            </span>
        </li>
         <li>
             <span class="menuitem">
                 <span class="icon icon-folder"></span>
                 <form>
                         <input id="input-folder" type="text" value="New folder">
                         <input type="submit" value=" " class="icon-confirm">
                 </form>
             </span>
         </li>
    </ul>
</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 optional 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