men
@vrembem/menu
npm i @vrembem/menu
men

@vrembem/menu

A CSS component library based on the BEM methodology.

by Sebastian Nitu

3.0.10 (see all)License:MITTypeScript:Not Found
npm i @vrembem/menu
Readme

Menu

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

npm version

Documentation

Installation

npm install @vrembem/menu

Styles

@use "@vrembem/menu";

Markup

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">
  <span>...</span>
  <span class="menu__text">...</span>
  <span>...</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>

Modifiers

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

Customization

Sass Variables

VariableDefaultDescription
$prefix-blocknullString 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.
$breakpointscore.$breakpoints Ref ↓The breakpoints map the menu_inline_[key] and menu_full_[key] modifiers uses to build their styles.
$sizecore.$form-control-sizeSets the minimum size of menu actions using the min-height and min-width properties.
$paddingcore.$paddingSets the padding property.
$gap1pxSets the gap spacing between menu__item elements.
$inner-gap1emThe horizontal gap spacing for elements inside the menu__action element.
$border-radiuscore.$border-radiusSets the border-radius property.
$backgroundnoneSets the background property.
$background-hoverrgba(core.$black, 0.05)Sets the background property on :hover state.
$background-focusrgba(core.$black, 0.05)Sets the background property on :focus state.
$background-activergba(core.$black, 0.1)Sets the background property on :active state.
$colorcore.$colorSets the color property.
$color-hovernullSets the color property on :hover state.
$color-focusnullSets the color property on :focus state.
$color-activenullSets the color property on :active state.
$font-size1emSets the font-size property.
$line-height1.5Sets the line-height property.
$sep-size1pxSets the size on the menu__sep element using height and width properties based on orientation.
$sep-gap0.5emSets the spacing gap created around the menu__sep element.
$sep-backgroundcore.$border-colorSets the background property on the menu__sep element.
$active-backgroundnoneSets the background property on is-active state class.
$active-colorcore.$primarySets the color property on is-active state class.
$disabled-backgroundnoneSets the background property on is-disabled state class.
$disabled-colorcore.$color-subtleSets the color property on is-disabled state class.
$invert-backgroundnullSets the background property of the menu_invert modifier.
$invert-background-hoverrgba(core.$white, 0.05)Sets the background property of the menu_invert modifier on :hover state.
$invert-background-focusrgba(core.$white, 0.05)Sets the background property of the menu_invert modifier on :focus state.
$invert-background-activergba(core.$white, 0.1)Sets the background property of the menu_invert modifier on :active state.
$invert-colorcore.$whiteSets the color property of the menu_invert modifier.
$invert-color-hovernullSets the color property of the menu_invert modifier on :hover state.
$invert-color-focusnullSets the color property of the menu_invert modifier on :focus state.
$invert-color-activenullSets the color property of the menu_invert modifier on :active state.
$invert-sep-backgroundcore.$border-color-invertSets the background property on the menu__sep element of the menu_invert modifier.
$invert-active-backgroundnoneSets the background property on is-active state class of the menu_invert modifier.
$invert-active-colorcore.$primarySets the color property on is-active state class of the menu_invert modifier.
$invert-disabled-backgroundnoneSets the background property on is-disabled state class of the menu_invert modifier.
$invert-disabled-colorrgba(core.$white, 0.5)Sets the color property on is-disabled state class of the menu_invert modifier.
$size-smcore.$form-control-size-smSets the minimum size of menu actions of the menu_size_sm modifier.
$size-sm-paddingcore.$padding-smSets the padding property of the menu_size_sm modifier.
$size-sm-font-sizecore.$font-size-smSets the font-size property of the menu_size_sm modifier.
$size-sm-line-heightcore.$line-height-smSets the line-height property of the menu_size_sm modifier.
$size-lgcore.$form-control-size-lgSets the minimum size of menu actions of the menu_size_lg modifier.
$size-lg-paddingcore.$padding-lgSets the padding property of the menu_size_lg modifier.
$size-lg-font-sizecore.$font-size-lgSets the font-size property of the menu_size_lg modifier.
$size-lg-line-heightcore.$line-height-lgSets 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;

Downloads/wk

224

GitHub Stars

12

LAST COMMIT

7mos ago

MAINTAINERS

1

CONTRIBUTORS

4

OPEN ISSUES

17

OPEN PRs

3
VersionTagPublished
3.0.10
latest
3mos ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate