Menu

npm install @vrembem/menu

@use "@vrembem/menu";

Options

Menu is built as a Sass module. Sass options are used to control CSS output, while design token CSS variables control the styling of the component. Below are the available configuration options.

Sass

Menu comes with the following Sass configuration options that can be set using either the config module or Sass with clause methods.

@use "@vrembem/menu" with (
  $config: (
    // Toggle for outputting menu--inline modifier breakpoint variants
    // @type boolean
    "inline-breakpoints": true,

    // Toggle for outputting menu--full modifier breakpoint variants
    // @type boolean
    "full-breakpoints": true
  )
);

Design tokens

Menu uses design token CSS variables in a reference and fallback pattern. Variables are referenced in the component's styles but are not directly defined; instead, they are provided with sensible fallbacks.

--vb-menu-size

var(--vb-font-size)

--vb-menu-line-height

var(--vb-line-height)

--vb-menu-padding-y

0.5rem

--vb-menu-padding-x

0.75rem

--vb-menu-border-radius

var(--vb-border-radius)

--vb-menu-gap

1px

--vb-menu-divider-color

var(--vb-border-color)

--vb-menu-divider-size

1px

--vb-menu-divider-spacing

0.5rem 0.75rem

--vb-menu-label-size

var(--vb-font-size-sm)

--vb-menu-label-gap

0.5rem

--vb-menu-label-foreground

var(--vb-foreground-subtle)

--vb-menu-action-gap

0.5rem

--vb-menu-background

transparent

--vb-menu-background-hover

var(--vb-menu-background, color-mix(in oklch, currentcolor 4%, transparent))

--vb-menu-background-focus

var(--vb-menu-background, transparent)

--vb-menu-background-active

var(--vb-menu-background, color-mix(in oklch, currentcolor 8%, transparent))

--vb-menu-foreground

var(--vb-foreground-strong)

--vb-menu-foreground-hover

var(--vb-menu-foreground, var(--vb-foreground-strong))

--vb-menu-foreground-focus

var(--vb-menu-foreground, var(--vb-foreground-strong))

--vb-menu-foreground-active

var(--vb-menu-foreground, var(--vb-foreground-strong))

--vb-menu-disabled-background

transparent

--vb-menu-disabled-foreground

var(--vb-foreground-subtle)

--vb-menu-active-background

transparent

--vb-menu-active-foreground

var(--vb-foreground-accent)

Basic usage

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__label and menu__divider elements to help visually group menu items.

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

Use the flex-grow utility class to wrap text inside the menu__action element. Additional elements inside the menu action receive appropriate spacing.

<ul class="menu">
  <li class="menu__item">
    <button class="menu__action">
      <span>...</span>
      <span class="flex-grow">...</span>
      <span>...</span>
    </button>
  </li>
  ...
</ul>

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.

<ul class="menu menu--inline">
  <li class="menu__item">
    <button class="menu__action menu__action--icon">
      ...
    </button>
  </li>
  ...
</ul>

is-active

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

<ul class="menu menu--inline">
  <li class="menu__item">
    <button class="menu__action is-active" disabled>
      ...
    </button>
  </li>
  ...
</ul>

disabled

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

<ul class="menu menu--inline">
  <li class="menu__item">
    <button class="menu__action" disabled>
      ...
    </button>
  </li>
  ...
</ul>

menu--inline

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>

Breakpoint variants

These modifiers come with media breakpoint variants. This allows changing styles based on a specific breakpoint key in the breakpoints config options map. Breakpoint variants output can be toggled using the menu-inline-breakpoints config option (default: true).

<ul class="menu lg:menu--inline">...</ul>

Available variants

• xs:menu--inline
• sm:menu--inline
• md:menu--inline
• lg:menu--inline
• xl:menu--inline

menu--full

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>

Breakpoint variants

These modifiers come with media breakpoint variants. This allows changing styles based on a specific breakpoint key in the breakpoints config options map. Breakpoint variants output can be toggled using the menu-full-breakpoints config option (default: true).

<ul class="menu menu--inline lg:menu--full">...</ul>

Available variants

• xs:menu--full
• sm:menu--full
• md:menu--full
• lg:menu--full
• xl:menu--full