Badge

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap.

Bottom Navigation

To show this type of Bottom Navigation you will need this code in down here.

<BottomNavigation value={value} onChange={this.handleChange} className={classes.root}>
<BottomNavigationAction label="Recents" icon={<RestoreIcon/>} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon/>} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon/>} />
</BottomNavigation>

    

Bottom Navigation with No Label

If there are four or five actions, display inactive views as icons only.

<BottomNavigation value={value} onChange={this.handleChange}
               className={flex-wrap bottom-navigation} >
<BottomNavigationAction label="Recents" value="recents" icon={<RestoreIcon/>} />
<BottomNavigationAction label="Favorites" value="favorites" icon={<FavoriteIcon/>} />
<BottomNavigationAction label="Nearby" value="nearby" icon={<LocationOnIcon/>} />
</BottomNavigation>

    

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
children *	node		The content of the component.
classes	object		Useful to extend the style applied to components.
onChange	func		Callback fired when the value changes. Signature: function(event: object, value: any) => void event: The event source of the callback value: We default to the index of the child
showLabels	bool	false	If true, all BottomNavigationActions will show their labels. By default, only the selected BottomNavigationAction will show its label.
value	any		The value of the currently selected BottomNavigationAction.