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