Skip to main content
react-md
Menu - SassDoc

Variables

Number

The elevation for menus. This should be a number from 0 to 24 (inclusive) as it gets passed to the rmd-elevation mixin.

$rmd-menu-elevation: 8 !default;

Since v2.7.0

Color

The background color for a menu in light themes.

$rmd-menu-light-background-color: rmd-theme-var(surface) !default;

Since v2.7.0

Color

The background color for a menu in dark themes when the $rmd-theme-dark-elevation feature flag is also enabled.

$rmd-menu-dark-elevation-background-color: map-get(
  $rmd-theme-dark-elevation-colors,
  $rmd-menu-elevation
) !default;
See also

Since v2.7.0

Color

The background color for a menu in dark themes.

$rmd-menu-dark-background-color: if(
  $rmd-theme-dark-elevation and $rmd-menu-dark-elevation-background-color,
  $rmd-menu-dark-elevation-background-color,
  rmd-theme-var(surface)
) !default;
Color

The background color to use for menus

$rmd-menu-background-color: if(
  $rmd-theme-light,
  $rmd-menu-light-background-color,
  $rmd-menu-dark-background-color
) !default;
Color

The text color to use for menus

$rmd-menu-color: rmd-theme-var(on-surface) !default;
Number

The z-index for menus.

$rmd-menu-z-index: $rmd-utils-temporary-element-z-index !default;
Number

The min-width to apply to menus.

$rmd-menu-min-width: 7rem !default;
Number

The amount of spacing to use between icons and text within menu items. This really overwrites the additional spacing provided in the base list package since menu items are normally more dense and don't need to align with specific "keylines" in your app.

$rmd-menu-icon-spacing: 1rem !default;
Map

A Map of all the "themeable" parts of the menu package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

$rmd-menu-theme-values: (
  background-color: $rmd-menu-background-color,
  color: $rmd-menu-color,
  min-width: $rmd-menu-min-width,
  icon-spacing: $rmd-menu-icon-spacing,
  z-index: $rmd-menu-z-index,
) !default;

Mixins

mixin

Creates the styles for one of the menu's theme values. This is mostly going to be an internal helper mixin util.

Parameters
NameDescriptionTypeDefault Value
$property

The property to set a rmd-menu-theme-values value to.

String
$theme-style

One of the keys of rmd-menu-theme-values to extract a value from.

String
$fallback

A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the rmd-menu-theme-values map when null.

Color|String|Numbernull
mixin

Updates one of the menu's theme variables with the new value for the section of your app.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The menu theme style type to update. This should be one of the $rmd-menu-theme-values keys.

String
$value

The new value to use.

Color|String|Number
mixin
mixin

Creates all the styles for the @react-md/menu package.

Functions

function

This function is used to quickly get one of the menu's theme values. This is really just for the rmd-menu-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — Color|String|Number

one of the menu's theme values.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-menu-theme-values map keys to get a value for.

String
function

This function is used to get one of the menu's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-menu-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — String

one of the menu's theme values as a css variable.

Parameters
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-menu-theme-values map keys to set a value for.

String
$fallback

An optional fallback color to apply. This is set to null by default and not used since the link's theme variables should always exist.

Color|String|Numbernull