React Suite Breadcrumb With Expand
React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Breadcrumb component is used for Navigation purposes. We can display the current page path and quickly return to the history page.
With Expand: In Breadcrumbs, we can use an attribute maxItems to set the maximum number of breadcrumbs to display. For eg, if we set maxItems=3, then it will collapse all the breadcrumbs and display only 3. It will show ‘ … ‘, where breadcrumbs are collapsed.
eg A > B > C > D > E > F
We have 6 breadcrumbs. If maxItems=3. Then it will display like
A > ... >F (First > ... > last)
Syntax:
<Breadcrumb separator={':'} maxItems={value}>
<Breadcrumb.Item>
GeeksforGeeks
</Breadcrumb.Item>
</Breadcrumb>
Creating 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 ReactJS application, Install the required module using the following command:
npm install rsuite
Project Structure: It will look like the following.
Example 1: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. In this example, we will simply create a few Breadcrumbs and set maxItems=3
HTML
import React from 'react';
import Breadcrumb from 'rsuite/Breadcrumb';
function App() {
return (
< div >
< h1 style={{ color: 'green' }}>GeeksforGeeks</ h1 >
< h3 >React Suite Breadcrumb With Expand</ h3 >
< Breadcrumb separator={':'} maxItems={3}>
< Breadcrumb.Item style={{ marginRight: '6px',
marginLeft: '6px' }}>
GeeksforGeeks
</ Breadcrumb.Item >
< Breadcrumb.Item style={{ marginRight: '6px',
marginLeft: '6px' }}>
Computer
</ Breadcrumb.Item >
< Breadcrumb.Item style={{ marginRight: '6px',
marginLeft: '6px' }}>
Science
</ Breadcrumb.Item >
< Breadcrumb.Item style={{ marginRight: '6px',
marginLeft: '6px' }}>
Portal
</ Breadcrumb.Item >
</ Breadcrumb >
</ div >
)
}
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: In this example, we will show how we can use buttons as a breadcrumb. Similar way, we can use images, links, or anything as a breadcrumb.
Javascript
import React from 'react' ;
import Breadcrumb from 'rsuite/Breadcrumb' ;
import Button from '@mui/material/Button' ;
function App() {
return (
<div>
<h1 style={{ color: 'green' }}>GeeksforGeeks</h1>
<h3>React Suite Breadcrumb With Expand</h3>
<Breadcrumb separator={ ':' } maxItems={3}>
<Breadcrumb.Item style={{
marginRight: '6px' ,
marginLeft: '6px'
}}>
<Button color= "secondary" >
GeeksforGeeks</Button>
</Breadcrumb.Item>
<Breadcrumb.Item style={{
marginRight: '6px' ,
marginLeft: '6px'
}}>
<Button variant= "contained"
color= "success" >
Computer
</Button>
</Breadcrumb.Item>
<Breadcrumb.Item style={{
marginRight: '6px' ,
marginLeft: '6px'
}}>
<Button variant= "contained"
color= "secondary" >Science</Button>
</Breadcrumb.Item>
<Breadcrumb.Item style={{
marginRight: '6px' ,
marginLeft: '6px'
}}>
<Button variant= "outlined"
color= "error" >Portal</Button>
</Breadcrumb.Item>
</Breadcrumb>
</div>
)
}
export default App;
|
Output:
References: https://rsuitejs.com/components/breadcrumb/#with-expand
Last Updated :
29 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...