Member-only story
Hello, Shmoji here. In this tutorial, I will show you how to create a Breadcrumb component using React. If you don’t already know, the picture below is a breadcrumb component. If you prefer videos and want more detail then here is the YouTube tutorial offering just that.
We will be building the presentation layer of this component but no functionality. If I see a bunch of people wanting to know how to remove and add crumbs dynamically then I will make a second part to this tutorial. A Breadcrumb component is pretty simple so this is a good tutorial if you are just starting out with React!
Outline
- Bootstrap: Installing Bootstrap for a few styles
- Breadcrumb Component: Creating the core component
- App.js: Adding the component to this file in order to show your breadcrumb in the browser
NOTE: I will not cover detailed project setup in this article, rather I am starting from a basic React app that was created using npm init react-app crumbsand I am using Visual Studio Code.
Alright, let’s get started.
Bootstrap
We are going to use a little bit of Bootstrap, so install that in the terminal with:
npm install bootstrap
Now open the file called index.js and paste this at the top:
import ‘bootstrap/dist/css/bootstrap.min.css’;
Now you have the CSS part of Bootstrap.
Breadcrumb component
Now let’s create the Breadcrumb component( don’t worry, it isn’t too complicated). Create a folder inside of src called components. Inside that, create a file called Breadcrumb.js (refer to my video if this early stuff is confusing you).
I am going to give you the entire code for this component and then explain the most confusing parts after:
