React-Bootstrap Breadcrumb API
Last Updated :
22 Nov, 2023
React-bootstrap is a frontend Stylesheet library. It replaces the Bootstrap JavaScript into completely a react component.It creates a seamless front-end development experience.Breadcrumb helps to display the current page location within a navigational hierarchy.
Syntax:
<Breadcrumb> </Breadcrumb>
React Bootstrap Breadcrumb props:
- bsPrefix: The changes the component’s CSS base class name and modifier class names prefix.
- label: It adds label for the component.
- listProps: It helps to add a list of additional props.
- as: It helps to customize the element, changes the element type.
Steps to create React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the React JS application, Install the required module using the following command:
npm install react-bootstrap bootstrap
Project Structure:
Example 1: In this example we will see how to add a breadcrumb component in the App.js file
Javascript
import Breadcrumb from 'react-bootstrap/Breadcrumb' ;
import 'bootstrap/dist/css/bootstrap.min.css' ;
function App() {
return (
<div className= "App text-center" >
<h3>React-Bootstrap Breadcrumb API</h3>
<Breadcrumb label= "breadcrumb-1" >
GeeksforGeeks
</Breadcrumb.Item>
<Breadcrumb.Item>
Articles
</Breadcrumb.Item>
<Breadcrumb.Item> React-Bootstrap</Breadcrumb.Item>
<Breadcrumb.Item active> Breadcrumb API</Breadcrumb.Item>
</Breadcrumb>
</div>
);
}
export default App;
|
Output
Example 2: In this example we will see how the breadcrumb component can display the properties of another element using the as prop in the App.js file
Javascript
import Breadcrumb from "react-bootstrap/Breadcrumb" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
function App() {
return (
<div className= "App text-center" >
<h3>React-Bootstrap Breadcrumb API</h3>
<Breadcrumb as={ "h5" }>
GeeksforGeeks
</Breadcrumb.Item>
<Breadcrumb.Item>Courses</Breadcrumb.Item>
<Breadcrumb.Item> Students</Breadcrumb.Item>
<Breadcrumb.Item active>
Interview Preparation Course
</Breadcrumb.Item>
</Breadcrumb>
</div>
);
}
export default App;
|
Output
Share your thoughts in the comments
Please Login to comment...