Menu

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


Implementation

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">
<a>Home</a>
<a>About</a>
<a>Contact</a>
<a>Help</a>
<hr>
<a>Support</a>
</div>
</div>
import { Button } from 'denali-react';
import { Button } from 'denali-react';
Apply tabindex="0" attribute to the parent a tag to allow users to open the menu when tabbing through the website.

Alignment

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

Left

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">
<ul>
<li><a>User guide</a></li>
<li><a>Follow us on jive</a></li>
<li><a>Send Feedback</a></li>
<hr>
<li><a>Support</a></li>
</ul>
</div>
</div>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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">https://screwdriver.cd/pipelines/134 <i class="d-icon d-external is-extrasmall"></i></a>
</div>
</div>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

Variables

You can use these variables to customize this component. Simply set one or multiple of these variables and recompile the SCSS.

$menu-config:

Name Type Default value Computed value
corner-radius border-radius 4px  
backgound-color background #ffffff  
shadow box-shadow 0px 4px 8px rgba(0, 0, 0, 0.16)  
border:style solid solid  
border:width width 2px  
border:color color #e8e8e8  
line-break:size border-width 2px  
line-break:color border-color #e8e8e8