Menus

Variables

md-menu-include-cascading
$md-menu-include-cascading: true !default;
Sass (Scss)

Description

Boolean if the cascading menu styles should be included. This will update the collapser icon to be rotated to the side.

Type

Boolean

See

md-menu-include-cascading-styles
$md-menu-include-cascading-styles: true !default;
Sass (Scss)

Description

Boolean if the additional styles for cascading menus should be included. I'm not really sure why these styles are part of the spec.

Type

Boolean

See

md-menu-units-width
$md-menu-units-width: 56px !default;
Sass (Scss)

Description

The width for a menu's unit. I don't really get it myself. It is a part of the material design specs though.

Type

Number
md-menu-transition-time
$md-menu-transition-time: null !default;
Sass (Scss)

Description

The transition time to use for menus type Number

md-menu-min-width
$md-menu-min-width: $md-menu-units-width * 2 !default;
Sass (Scss)

Description

The min width to apply to menus. If this value is set, the mobile/desktop values will not be used.

Type

Number

Used by

See

md-menu-max-width
$md-menu-max-width: null !default;
Sass (Scss)

Description

The max width to apply to menus. If this value is set, the mobile/desktop values will not be used.

Type

Number

Used by

See

md-menu-max-height
$md-menu-max-height: null !default;
Sass (Scss)

Description

The max height to apply to menus. If this value is set, the mobile/desktop values will not be used.

Type

Number

Used by

See

md-menu-mobile-min-width
$md-menu-mobile-min-width: null !default;
Sass (Scss)

Description

An optional min width to apply to menus on tablet displays.

Type

Number

Used by

See

md-menu-mobile-max-width
$md-menu-mobile-max-width: null !default;
Sass (Scss)

Description

An optional max width to apply to menus on mobile devices.

Type

Number

Used by

See

md-menu-mobile-max-height
$md-menu-mobile-max-height: $md-height * 5 + $md-height / 3 + $md-list-mobile-padding * 2 !default;
Sass (Scss)

Description

The max height for menus on mobile devices.

Type

Number

Used by

md-menu-desktop-min-width
$md-menu-desktop-min-width: null !default;
Sass (Scss)

Description

An optional min width to apply to menus on desktop displays.

Type

Number

Used by

See

md-menu-desktop-max-width
$md-menu-desktop-max-width: null !default;
Sass (Scss)

Description

An optional max width to apply to menus on desktop screens.

Type

Number

Used by

See

md-menu-desktop-max-height
$md-menu-desktop-max-height: $md-height * 5 + $md-height / 3 + $md-list-desktop-padding * 2 !default;
Sass (Scss)

Description

The max height for menus on desktop screens.

Type

Number

Used by

md-menu-cascading-font-size
$md-menu-cascading-font-size: 15px !default;
Sass (Scss)

Description

The font size to use for cascading menus.

Type

Number

Used by

md-menu-cascading-padding
$md-menu-cascading-padding: 24px !default;
Sass (Scss)

Description

The padding to use for cascading menus.

Type

Number

Used by

md-menu-cascading-height
$md-menu-cascading-height: 32px !default;
Sass (Scss)

Description

The Height to use for each list item in a cascading menu.

Type

Number

Used by

md-menu-cascading-list-padding
$md-menu-cascading-list-padding: 16px !default;
Sass (Scss)

Description

The amount of padding to add to the top and bottom of a list in a cascading menu.

Type

Number

Used by

md-menu-z-index
$md-menu-z-index: null !default;
Sass (Scss)

Description

The z-index to use for menus. This is really only if the z-index for a layover is not preferred.

Type

Number

Used by

See

Mixins

react-md-menus
@mixin react-md-menus($include-media: $md-media-included, $include-cascading: $md-menu-include-cascading) {}
Sass (Scss)
Click to expand

Description

Includes the styles for menus.

Parameters

NameDescriptionTypeDefault value
$include-media

Boolean if the media queries are included for menus.

Boolean
$md-media-included
$include-cascading

Boolean if the desktop cascading styles for menus should be included.

Boolean
$md-menu-include-cascading

Examples

Example Usage SCSS

@include react-md-menus;
Sass (Scss)

Requires

Used by

react-md-menus-cascading
@mixin react-md-menus-cascading($include-cascading-styles: $md-menu-include-cascading-styles) {}
Sass (Scss)
Click to expand

Description

Creates the styles for cascading menus. This really just rotates the collapser icon to change from vertical to horizontal.

Parameters

NameDescriptionTypeDefault value
$include-cascading-styles

Boolean if the material design spec styles should also be included. This changes font-size, padding, and height of the items in a cascading menu.

Boolean
$md-menu-include-cascading-styles

Requires

Used by

react-md-menus-mobile
@mixin react-md-menus-mobile {}
Sass (Scss)
Click to expand

Description

Creates the styles for menus on mobile devices. This should normally be used a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-menus-mobile;
}
Sass (Scss)

Requires

Used by

react-md-menus-desktop
@mixin react-md-menus-desktop {}
Sass (Scss)
Click to expand

Description

Creates the styles for menus on desktop screens. This should normally be used a media query.

Parameters

None

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-menus-desktop;
}
Sass (Scss)

Requires

Used by

react-md-menus-media
@mixin react-md-menus-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries for menus on mobile devices and desktop screens.

Parameters

None

Examples

Example Usage SCSS

@include react-md-menus-media;
Sass (Scss)

Requires

Used by