Menu

menu

The menu component is composed of at minimum three parts: menu, menu__item and menu__action. The menu and menu items should be a <ul> and list items <li> respectively while the menu action can be either an <a> or <button> element. Also available is the optional menu__sep element to create separators in between menu items.

<ul class="menu">
  <li class="menu__item">
    <button class="menu__action">
      ...
    </button>
  </li>
  <li class="menu__sep"></li>
</ul>

Use the menu__text element to wrap text inside the menu__action element. Additional elements inside the menu action receive appropriate spacing.

<button class="menu__action">
  <svg class="icon" role="img"></svg>
  <span class="menu__text">...</span>
  <span class="color-subtle">...</span>
</button>

<button class="menu__action">
  <svg class="icon" role="img"></svg>
  <span class="menu__text">...</span>
</button>

For links that only contain an icon, you can use the menu__action_icon element modifier to create a square link similar to the button_icon modifier.

<button class="menu__action menu__action_icon">
  ...
</button>

is-active

Adding the is-active class will provide visual indication that the action is currently in an active state.

<button class="menu__action is-active" disabled>
  ...
</button>

is-disabled

Adding the boolean disabled attribute or is-disabled class will provide visual indication that the user should not be able to interact with the action.

<button class="menu__action is-disabled" disabled>
  ...
</button>

menu_inline_[key]

Used to apply horizontal menu styles. This is typically used for short menus or toolbars where vertical space can be saved.

<ul class="menu menu_inline">...</ul>

To set a menu to inline above a specific breakpoint, use the inline breakpoint modifier: menu_inline_[key]

<ul class="menu menu_inline_lg">...</ul>

Available Variations

• menu_inline_xl
• menu_inline_lg
• menu_inline_md
• menu_inline_sm
• menu_inline_xs

@mixin menu-inline()

Output the styles for an inline menu.

Example

.menu_custom {
  @include menu-inline();
}

// CSS Output
.menu_custom {
  flex-direction: row;
  align-items: center;
}

.menu_custom .menu__item + .menu__item {
  margin-top: 0;
  margin-left: 1px;
}

.menu_custom .menu__sep {
  width: 1px;
  height: auto;
  margin: 0 0.5em;
}

.menu_custom .menu__sep:first-child {
  margin-left: 0;
}

.menu_custom .menu__sep:last-child {
  margin-right: 0;
}

.menu_custom .menu__action {
  justify-content: center;
  white-space: nowrap;
}

menu_full_[key]

Used to span a horizontal menu to fill the full width of its container. This modifier is meant to be paired with the menu_inline modifier as the default styles of a vertical menu already fill the full width of their container.

<ul class="menu menu_inline menu_full">...</ul>

To set a menu to full below a specific breakpoint, use the full breakpoint modifier: menu_full_[key]

<ul class="menu menu_inline menu_full_lg">...</ul>

Available Variations

• menu_full_xl
• menu_full_lg
• menu_full_md
• menu_full_sm
• menu_full_xs

@mixin menu-full()

Output the styles for a full width menu (should be applied to menus that are already inline).

Example

.menu_custom {
  @include menu-full();
}

// CSS Output
.menu_custom .menu__item {
  flex: 1 1 auto;
}

.menu_custom .menu__action {
  justify-content: center;
}

menu_invert

A modifier that provides an inversed menu style for better contrast on a dark background.

<ul class="menu menu_invert">
  ...
</ul>

menu_size_[value]

Adjust the size of a menu by increasing or decreasing its padding and font-size. By default, the menu scale will provide an action height of 30px (small menu_size_sm), 40px (default) and 50px (large menu_size_lg).

<ul class="menu menu_size_sm">
  ...
</ul>

<ul class="menu menu_size_lg">
  ...
</ul>

Available Variations

• menu_size_sm
• menu_size_lg

Sass Variables

$breakpoints

The breakpoints map the menu_inline_[key] and menu_full_[key] modifiers uses to build their styles.

// Inherited from: core.$breakpoints
$breakpoints: (
  "xs": 480px,
  "sm": 620px,
  "md": 760px,
  "lg": 990px,
  "xl": 1380px
) !default;