Bottom Navigations

Variables

md-bottom-navigation-shifting-ink-color
$md-bottom-navigation-shifting-ink-color: rgba($md-white-base, .12) !default;
Sass (Scss)

Description

The default ink color to use for a shifting bottom navigation.

Type

Color

Used by

md-bottom-navigation-transition-time
$md-bottom-navigation-transition-time: $md-transition-time * 2 !default;
Sass (Scss)

Description

The transition time it takes for the bottom navigation to slide out of view when it is dynamic. It is also the transition time for switching the background color.

Type

Number

Used by

md-bottom-navigation-include-shifting
$md-bottom-navigation-include-shifting: true !default;
Sass (Scss)

Description

Boolean if the shifting bottom navigation style should be included by default.

Type

Boolean
md-bottom-navigation-include-dynamic
$md-bottom-navigation-include-dynamic: true !default;
Sass (Scss)

Description

Boolean if the dynamic bottom navigation style should be included by default.

Type

Boolean
md-bottom-navigation-height
$md-bottom-navigation-height: 56px !default;
Sass (Scss)

Description

The height for the bottom navigation bar.

Type

Number

Used by

md-bottom-navigation-max-width
$md-bottom-navigation-max-width: 168px !default;
Sass (Scss)

Description

The max width for a tab on the bottom navigation.

Type

Number

Used by

md-bottom-navigation-top-padding-active
$md-bottom-navigation-top-padding-active: 6px !default;
Sass (Scss)

Description

The top padding for a bottom navigation's tab when active.

Type

Number

Used by

md-bottom-navigation-top-padding-inactive
$md-bottom-navigation-top-padding-inactive: 8px !default;
Sass (Scss)

Description

The top padding for a bottom navigation's tab when inactive.

Type

Number

Used by

md-bottom-navigation-bottom-padding
$md-bottom-navigation-bottom-padding: 10px !default;
Sass (Scss)

Description

The bottom padding for a bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-lr-padding
$md-bottom-navigation-lr-padding: 12px !default;
Sass (Scss)

Description

The left and right padding to apply to a bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-fixed-min-width
$md-bottom-navigation-fixed-min-width: 80px !default;
Sass (Scss)

Description

The min width for a fixed bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-shifting-active-min-width
$md-bottom-navigation-shifting-active-min-width: 96px !default;
Sass (Scss)

Description

The min width for a shifting bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-shifting-inactive-min-width
$md-bottom-navigation-shifting-inactive-min-width: 56px !default;
Sass (Scss)

Description

The min width for an inactive shifting bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-shifting-inactive-max-width
$md-bottom-navigation-shifting-inactive-max-width: 96px !default;
Sass (Scss)

Description

The max width for an inactive shifting bottom navigation's tab.

Type

Number

Used by

md-bottom-navigation-z-index
$md-bottom-navigation-z-index: 11 !default;
Sass (Scss)

Description

The z-index to use for bottom navigations

Type

Number

Used by

Mixins

react-md-bottom-navigations
@mixin react-md-bottom-navigations($include-shifting: $md-bottom-navigation-include-shifting, $include-dynamic: $md-bottom-navigation-include-dynamic) {}
Sass (Scss)
Click to expand

Description

Creates the styles for bottom navigations. If both the include-shifting and include-dynamic params are false, no styles will be created.

Parameters

NameDescriptionTypeDefault value
$include-shifting

Boolean if the styles for a shifting bottom navigation should be included.

Boolean
$md-bottom-navigation-include-shifting
$include-dynamic

Boolean if the styles for a dynamic bottom navigation should be included.

Boolean
$md-bottom-navigation-include-dynamic

Examples

Utility Classes

The bottom navigations have a utility class name to offset any content to prevent it from underlapping the bottom navigations. Just apply the md-bottom-navigation-offset class name to whatever element or component to add padding bottom equal to the height of the bottom navigation.

<div>
  <main className="md-bottom-navigation-offset">Some Content</main>
  <BottomNavigation {...props} />
</div>
Js

Requires

Used by

react-md-bottom-navigations-nav
@mixin react-md-bottom-navigations-nav($include-shifting: $md-bottom-navigation-include-shifting) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a tab in the bottom navigation nav item (link). This should normally be used within the react-md-bottom-navigations mixin.

Parameters

NameDescriptionTypeDefault value
$include-shifting

Boolean if the styles for a shifting bottom navigation should be included.

Boolean
$md-bottom-navigation-include-shifting

Requires

Used by

react-md-theme-bottom-navigations-colored
@mixin react-md-theme-bottom-navigations-colored($bg-color, $label-color: $md-white-base, $ink-color: $md-bottom-navigation-shifting-ink-color) {}
Sass (Scss)
Click to expand

Description

Styles a bottom navigation that is colored to update the .md-background--primary color to a new color. It also will optionally update the label's color and the ink's color if they do not equal the defaults. This is mostly used when you want to update the navigation drawer's color when a new tab is clicked.

Parameters

NameDescriptionTypeDefault value
$bg-color

The background color to force for the .md-background--primary of the bottom navigation.

Color
$label-color

The color to style the label. If this is equal to $md-white-base, the styles will not be created.

Color
$md-white-base
$ink-color

The ink color to use for this theme. If it equals the $md-bottom-navigation-shifting-ink-color, the styles will not be included.

Color
$md-bottom-navigation-shifting-ink-color

Examples

Example Usage SCSS

.another-theme {
  @include react-md-theme-bottom-navigations-color($md-deep-purple-500);
}
Sass (Scss)

Example Usage React Components

<div className={cn({ 'another-theme': themeTabActive })}>
  <BottomNavigation
    links={[{ label: 'Woop', }, { label: 'Theme Tab', }, { label: 'Noop' }]}
    onNavChange={activeTabIndex => this.setState({ themeTabActive: activeTabIndex === 1 })}
  />
</div>
Javascript

Requires