Material UI — Bottom Nav and Breadcrumbs

Image for post
Image for post
Photo by Ting Tian on Unsplash

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:

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:

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:

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:

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:

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:

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store