Material UI — Bottom Nav and Breadcrumbs

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add bottom navigation and breadcrumbs with Material UI.

Bottom Navigation

We can add bottom navigation to let us add links to move around our app.

To add it, we can use the BottomNavigation component.

For example, we can write:

import React from "react";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";

export default function App() {
  const [value, setValue] = React.useState(0);

  return (
    <BottomNavigation
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      showLabels
    >
      <BottomNavigationAction label="latest" icon={<RestoreIcon />} />
      <BottomNavigationAction label="favorites" icon={<FavoriteIcon />} />
      <BottomNavigationAction label="location" icon={<LocationOnIcon />} />
    </BottomNavigation>
  );
}

to add a navigation bar to the bottom of the page.

We add the BottomNavigation component with the showLabels prop to show the labels.

BottomNavigationAction has the items that users can click on

label has the text below the icon.

icon has the icons.

When we click on the BottomNavigationAction then the value state will be set with the onChange callback which calls the setValue function with the index.

The value prop of BottomNavigationAction lets us set the value that’s set when we click the action.

For example, we can write:

import React from "react";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";

export default function App() {
  const [value, setValue] = React.useState("favorites");

  return (
    <BottomNavigation
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      showLabels
    >
      <BottomNavigationAction
        label="latest"
        value="latest"
        icon={<RestoreIcon />}
      />
      <BottomNavigationAction
        label="favorites"
        value="favorites"
        icon={<FavoriteIcon />}
      />
      <BottomNavigationAction
        label="location"
        value="location"
        icon={<LocationOnIcon />}
      />
    </BottomNavigation>
  );
}

We set the value prop for each item so that we can use a name that we want for the state instead of an index number.

Breadcrumbs

We can add breadcrumbs to let us click links on navigation hierarchies.

To add one, we can use the Breadcrumbs components with Link s inside.

For example, we can write:

import React from "react";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Link from "@material-ui/core/Link";

export default function App() {
  const handleClick = event => {
    event.preventDefault();
    console.info("clicked.");
  };
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link color="inherit" href="/" onClick={handleClick}>
        home
      </Link>
      <Link color="inherit" href="/profile/" onClick={handleClick}>
        profile
      </Link>
      <Link color="inherit" href="/profile/user" onClick={handleClick}>
        user
      </Link>
    </Breadcrumbs>
  );
}

We have the Breadcrumbs component surrounding the Link components.

color is inherited from the parent.

href has the URL for the link.

onClick lets us listen for item clicks.

Active Last Breadcrumb

We can make the last item active with the textPrimary value for the color prop.

For example, we can write:

import React from "react";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Link from "@material-ui/core/Link";

export default function App() {
  const handleClick = event => {
    event.preventDefault();
    console.info("clicked.");
  };
  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link color="inherit" href="/" onClick={handleClick}>
        home
      </Link>
      <Link color="inherit" href="/profile/" onClick={handleClick}>
        profile
      </Link>
      <Link color="textPrimary" href="/profile/user" onClick={handleClick}>
        user
      </Link>
    </Breadcrumbs>
  );
}

We added the color prop with the textPrimary string to make it highlight.

Custom Separator

To change the default separator, we can use the separator prop.

For example, we can write:

import React from "react";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Link from "@material-ui/core/Link";

export default function App() {
  const handleClick = event => {
    event.preventDefault();
    console.info("clicked.");
  };
  return (
    <Breadcrumbs separator="-">
      <Link color="inherit" href="/" onClick={handleClick}>
        home
      </Link>
      <Link color="inherit" href="/profile/" onClick={handleClick}>
        profile
      </Link>
      <Link color="textPrimary" href="/profile/user" onClick={handleClick}>
        user
      </Link>
    </Breadcrumbs>
  );
}

to change the default separator to the - character.

Collapsed Breadcrumbs

If we have lots of breadcrumbs, we can set the maxItems prop to set the max number of breadcrumb items to show.

For example, we can write:

import React from "react";
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
import Link from "@material-ui/core/Link";

export default function App() {
  const handleClick = event => {
    event.preventDefault();
    console.info("clicked.");
  };
  return (
    <Breadcrumbs maxItems={2}>
      <Link color="inherit" href="/" onClick={handleClick}>
        home
      </Link>
      <Link color="inherit" href="/profile/" onClick={handleClick}>
        profile
      </Link>
      <Link color="textPrimary" href="/profile/user" onClick={handleClick}>
        user
      </Link>
    </Breadcrumbs>
  );
}

to limit the items to display to 2 with the maxItems prop.

Conclusion

We can add a bottom navigation bar to our app with the BottomNavigation component.

Breadcrumbs lets us add a breadcrumb to the navigation items in a hierarchy.