Menu

Menus represent groups of links, actions or tools that a user can interact with.

npm version

Source Code

npm install @vrembem/menu
@use "@vrembem/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>

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

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

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

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

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

Variable Default Description
$prefix-block null String to prefix blocks with.
$prefix-element "__" String to prefix elements with.
$prefix-modifier "_" String to prefix modifiers with.
$prefix-modifier-value "_" String to prefix modifier values with.
$breakpoints core.$breakpoints Ref ↓ The breakpoints map the menu_inline_[key] and menu_full_[key] modifiers uses to build their styles.
$size core.$form-control-size Sets the minimum size of menu actions using the min-height and min-width properties.
$padding core.$padding Sets the padding property.
$gap 1px Sets the gap spacing between menu__item elements.
$inner-gap 1em The horizontal gap spacing for elements inside the menu__action element.
$border-radius core.$border-radius Sets the border-radius property.
$background none Sets the background property.
$background-hover rgba(core.$black, 0.05) Sets the background property on :hover state.
$background-focus rgba(core.$black, 0.05) Sets the background property on :focus state.
$background-active rgba(core.$black, 0.1) Sets the background property on :active state.
$color core.$color Sets the color property.
$color-hover null Sets the color property on :hover state.
$color-focus null Sets the color property on :focus state.
$color-active null Sets the color property on :active state.
$font-size 1em Sets the font-size property.
$line-height 1.5 Sets the line-height property.
$sep-size 1px Sets the size on the menu__sep element using height and width properties based on orientation.
$sep-gap 0.5em Sets the spacing gap created around the menu__sep element.
$sep-background core.$border-color Sets the background property on the menu__sep element.
$active-background none Sets the background property on is-active state class.
$active-color core.$primary Sets the color property on is-active state class.
$disabled-background none Sets the background property on is-disabled state class.
$disabled-color core.$color-subtle Sets the color property on is-disabled state class.
$invert-background null Sets the background property of the menu_invert modifier.
$invert-background-hover rgba(core.$white, 0.05) Sets the background property of the menu_invert modifier on :hover state.
$invert-background-focus rgba(core.$white, 0.05) Sets the background property of the menu_invert modifier on :focus state.
$invert-background-active rgba(core.$white, 0.1) Sets the background property of the menu_invert modifier on :active state.
$invert-color core.$white Sets the color property of the menu_invert modifier.
$invert-color-hover null Sets the color property of the menu_invert modifier on :hover state.
$invert-color-focus null Sets the color property of the menu_invert modifier on :focus state.
$invert-color-active null Sets the color property of the menu_invert modifier on :active state.
$invert-sep-background core.$border-color-invert Sets the background property on the menu__sep element of the menu_invert modifier.
$invert-active-background none Sets the background property on is-active state class of the menu_invert modifier.
$invert-active-color core.$primary Sets the color property on is-active state class of the menu_invert modifier.
$invert-disabled-background none Sets the background property on is-disabled state class of the menu_invert modifier.
$invert-disabled-color rgba(core.$white, 0.5) Sets the color property on is-disabled state class of the menu_invert modifier.
$size-sm core.$form-control-size-sm Sets the minimum size of menu actions of the menu_size_sm modifier.
$size-sm-padding core.$padding-sm Sets the padding property of the menu_size_sm modifier.
$size-sm-font-size core.$font-size-sm Sets the font-size property of the menu_size_sm modifier.
$size-sm-line-height core.$line-height-sm Sets the line-height property of the menu_size_sm modifier.
$size-lg core.$form-control-size-lg Sets the minimum size of menu actions of the menu_size_lg modifier.
$size-lg-padding core.$padding-lg Sets the padding property of the menu_size_lg modifier.
$size-lg-font-size core.$font-size-lg Sets the font-size property of the menu_size_lg modifier.
$size-lg-line-height core.$line-height-lg Sets the line-height property of the menu_size_lg modifier.

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