Skip to main content

Raven Design System

Menu Popup Component

Toggleable contextual overlays for displaying lists of links in sub-menus. They can be toggled by clicking and hovering.

Positioning

Working with Menu Popup components can be a bit tricky. They use absolute positioning. Therefore, your container div is going to need to have a position:relative style and a defined width on it.

To provide a better understanding of this, we will inline some CSS styles used for the examples below.

Example

To see the Menu Popup example, click the purple link below .

<div class="u-block u-block--white">
    <div style="position:relative;width:220px">
        <button class="c-menupopup" style="color:purple;width:225px;" aria-label="Open Menu">Graduate Admission links</button>
        <ul class="menupopup__menu" aria-label="menupopup">
            <li class="menupopup__sep"><a href="https://graduate.carleton.ca">Graduate Admissions</a></li>
            <li><a href="https://graduate.carleton.ca/programs/">Graduate Programs</a></li>
            <li><a href="https://graduate.carleton.ca/apply-online/">Apply Online</a></li>
        </ul>
    </div>
</div>

Menu Popup components are uls nested under another element with a class of
.c-menupopup.

The parent elements are usually <button>s or other list <li>s when being used as a submenu. The <ul class="menupopup__menu"> needs to reside directly after the parent .c-menupopup element.

Right-side menu

Notice above how the default menu is aligned to the left and the top arrow positioned to the left. You can position both to the right using the c-menupopup--right modifier class. Click on the orange link below to see the menu align to the right along with the top arrow.

<div class="u-block u-block--white">
    <div style="position:relative;width:220px">
        <button class="c-menupopup c-menupopup--right" style="color:darkorange;width:225px;" aria-label="Open Menu">Graduate Admission links</button>
        <ul class="menupopup__menu" aria-label="menupopup">
            <li class="menupopup__sep"><a href="https://graduate.carleton.ca">Graduate Admissions</a></li>
            <li><a href="https://graduate.carleton.ca/programs/">Graduate Programs</a></li>
            <li><a href="https://graduate.carleton.ca/apply-online/">Apply Online</a></li>
        </ul>
    </div>
</div>

Hover toggle

If your parent element is also a link redirecting to another page, you can use an <a>, instead of a <button>. As a result of this, the Menu Popup will appear on hover. Hover over the green link below to see:

Graduate Admission links 

<div class="u-block u-block--white">
    <div style="position:relative;width:210px">
        <a class="c-menupopup c-menupopup--right" style="color:darkgreen;display:block" aria-label="Open Menu">Graduate Admission links</a>
        <ul class="menupopup__menu" aria-label="menupopup">
            <li class="menupopup__sep"><a href="https://graduate.carleton.ca">Graduate Admissions</a></li>
            <li><a href="https://graduate.carleton.ca/programs/">Graduate Programs</a></li>
            <li><a href="https://graduate.carleton.ca/apply-online/">Apply Online</a></li>
        </ul>
    </div>
</div>

Note: a carrot is created automatically beside menu popup components. For this to work best, your parent element should use display:block. Therefore, when using an inline <a>, you should use CSS to make it a block element.

Separator line

Notice in the examples above how the first menu popup list item has a separator line after it? You can add this separation line to any list item by adding the class:

<li class="menupopup__sep">

Separators are not required on the first item and can be removed.

Icons

Add icons to your popmenu items using the u-icon utility class>

Menu popup ith Icons 

<ul class="menupopup__menu" aria-label="menupopup" aria-expanded="false">
    <li>
        <a class="u-icon" href="dalink">
            { SVG include }
            Releases
        </a>
    </li>...

Guidelines

  • Place the most frequently used items at the top of the submenu.
  • Use separators to group related menu items.
  • Grey out any unavailable options.
  • Avoid long sub-menu dropdowns.
  • Keep the opening label in view when popup menu is showing.

Found in

Menu Popup components are used in the following blocks:

References