Menu Sass API

Variables

menu-disable-everything

$menu-disable-everything: false !default;

menu-disable-menu-item

$menu-disable-menu-item: false !default;

Used By

• @mixin menu-styles

menu-disable-menu-item-group

$menu-disable-menu-item-group: false !default;

Used By

• @mixin menu-styles

menu-disable-menu-item-checkbox

$menu-disable-menu-item-checkbox: $disable-menu-item or
  input-toggle.$disable-checkbox !default;

Used By

• @mixin menu-styles

menu-disable-menu-item-radio

$menu-disable-menu-item-radio: $disable-menu-item or input-toggle.$disable-radio !default;

Used By

• @mixin menu-menu-item-input-toggle-styles
• @mixin menu-styles

menu-disable-menu-item-switch

$menu-disable-menu-item-switch: $disable-menu-item or
  switch.$disable-menu-item-switch !default;

Used By

• @mixin menu-menu-item-input-toggle-styles
• @mixin menu-styles
• @mixin switch-styles

menu-disable-elevation-colors

$menu-disable-elevation-colors: theme.$disable-dark-elevation !default;

Used By

• @mixin menu-menu-styles

menu-elevation

$menu-elevation: 8 !default;

menu-background-color

$menu-background-color: theme.theme-get-var(surface-color) !default;

menu-color

$menu-color: theme.theme-get-var(text-primary-color) !default;

menu-z-index

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

menu-min-width

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

menu-spacing

$menu-spacing: spacing.get-var(md) !default;

menu-variables

$menu-variables: (background-color, color, min-width, spacing);

Mixins

menu-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

menu-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

menu-menu-styles

@mixin menu-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin menu-styles

Requires

• @mixin app-bar-use-var
• @mixin box-shadow
• @function theme-color-var-fallback
• $card-elevation
• $menu-disable-elevation-colors
• $avatar-background-color
• $avatar-color
• $dialog-z-index

menu-menu-item-styles

@mixin menu-item-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin menu-styles

Requires

• @function app-bar-get-var

menu-menu-item-group-styles

@mixin menu-item-group-styles { … }

See Also

• @mixin app-bar-styles

Used By

• @mixin menu-styles

menu-menu-item-input-toggle-styles

@mixin menu-item-input-toggle-styles { … }

Used By

• @mixin menu-styles

Requires

• $menu-disable-menu-item-radio
• $menu-disable-menu-item-switch
• $switch-track-width
• $switch-ball-size
• $switch-ball-offset

menu-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• @function is-theme-color-var
• $app-bar-disable-everything
• $avatar-background-color
• $avatar-color
• $dialog-min-width
• $divider-spacing

menu-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin menu-menu-styles
• @mixin menu-menu-item-styles
• @mixin menu-menu-item-group-styles
• @mixin menu-menu-item-input-toggle-styles
• $app-bar-disable-everything
• $menu-disable-menu-item
• $menu-disable-menu-item-group
• $menu-disable-menu-item-checkbox
• $menu-disable-menu-item-radio
• $menu-disable-menu-item-switch

Functions

menu-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles

Set to true if the MenuItem component won't be used for some reason.

Set to true to if the MenuItemGroup component will not be used.

Set to true to disable the MenuItemCheckbox styles.

Set to true to disable the MenuItemRadio styles.

Set to true to disable the MenuItemSwitch styles.

Set to true to disable the dark mode elevation colors for the Menu.

This should be a number between 0-24 representing the box-shadow elevation of the Menu.

The default background color to apply to a Menu.

The default text color to apply to a Menu.

The default z-index for a `Menu.

The min width for a Menu.

The gap to apply to elements within the MenuItem.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Generates the Menu component styles.

NOTE: This should only be used if not using the styles mixin.

Generates the MenuItem component styles.

NOTE: This should only be used if not using the styles mixin.

Generates the MenuItemGroup component styles.

NOTE: This should only be used if not using the styles mixin.

Generates the MenuItemCheckbox, MenuItemRadio, and MenuItemSwitch styles.

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value