You can add the component on any page in the template. You need to follow the steps given below: ‌

Step 1: You need to create a state, a function for change bottom navigation value. Also you need to add the code of bottom navigation in the page where you want to add the component. Please check the code snippet given below, we have added the bottom navigation in Dashboard:

<BottomNavigation
                              value={value}
                              onChange={(event, newValue) => {
                                 setValue(newValue);
                              }}
                              showLabels
                              className={classes.root}
                           >
                              <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
                              <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
                              <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
                           </BottomNavigation>

Step 2: Now Import the component from its parent library.

import { BottomNavigation, Box, BottomNavigationAction, Container } from '@material-ui/core';
import RestoreIcon from '@material-ui/icons/Restore';
import FavoriteIcon from '@material-ui/icons/Favorite';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import FolderIcon from '@material-ui/icons/Folder';

You can check some other layouts of bottom navigation below. For adding any of the below layout in the template, please check their relative code in the src->routes->UiComponents->BottomNavigations->index.js file.