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 primary elements when composing the menu component are menu__item’s containing menu__link’s. Use the optional menu__sep in between menu__item’s to create separators.

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link" href="#">
      ...
    </a>
  </li>
  <li class="menu__sep"></li>
</ul>

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

<a class="menu__link menu__link_icon" href="#">
  ...
</a>

Elements inside the menu__link and menu__text elements receive appropriate children spacing as long as text nodes are wrapped with span elements.

<a class="menu__link" href="#">
  <svg class="icon" role="img">
    <!-- Icon markup... -->
  </svg>
  <span>Text node...</span>
</a>

is-active is-disabled

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link is-active" href="#">
      ...
    </a>
  </li>
  <li class="menu__item">
    <a class="menu__link is-disabled" href="#">
      ...
    </a>
  </li>
</ul>
<ul class="menu 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_full_lg">...</ul>
<ul class="menu menu_stack">
  ...
</ul>

To create a stacked menu below a specific breakpoint, use the stack breakpoint modifier: menu_stack_[key]

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

A theme for using menus on a dark background.

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

A theme for creating tab styled menus.

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