@vrembem/menu

    1.34.0 • Public • Published

    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

    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

    Customization

    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;

    Install

    npm i @vrembem/menu

    DownloadsWeekly Downloads

    20

    Version

    1.34.0

    License

    MIT

    Unpacked Size

    41.7 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar