Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

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>
 
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>
 

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>
 

Variables

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