Menus contain discoverable content such as links and user information. They can be aligned to the left or the right.


To implement a menu start with a <div> tag and add the .menu class. Inside, insert an <a> tag with the class .menu-trigger to trigger the menu. Lastly, place a <div> tag with the class of .menu-content below the menu trigger and wrap menu items in <a> tags within the content <div>.

<div class="menu">
<a class="menu-trigger">Hover for default menu</a>
<div class="menu-content">
Apply tabindex="0" attribute to the parent a tag to allow users to open the menu when tabbing through the website.


By default, menu tooltips are positioned in the center of the menu.


Reposition a menu's tooltip to the left by adding an .is-left class to a menu's outer <div>.

<div class="menu is-left">
<a class="menu-trigger">Hover for left menu</a>
<div class="menu-content">
<li><a>User guide</a></li>
<li><a>Follow us on jive</a></li>
<li><a>Send Feedback</a></li>

Reposition a menu's tooltip to the right by adding an .is-right class to a menu's outer <div>.

<div class="menu is-right">
<a class="menu-trigger">Hover for right menu</a>
<div class="menu-content">
<p class="is-bold">Link copied to clipboard</p>
<a class="is-small is-sub"> <i class="d-icon d-external is-extrasmall"></i></a>


You can use these variables in a override.css file to customize this component.

Variable Name CSS Property
–menu-bg-color background
–menu-corner-radius border-radius
–menu-shadow box-shadow
–menu-border-color border-color
–menu-border-width border-width
–menu-border-style border-style
–menu-line-break-size height
–menu-line-break-color background