Dynamic rendering of breadcrumb using Bootstrap breadcrumb in React

When you are navigating between your portal pages, the breadcrumb comes to the rescue, the best thing after Navbar, right?

In this tutorial, I will be using Bootstrap breadcrumb. I'm assuming there is an existing react setup so we can dive right into it.

I'm working with the react version v17 and a bootstrap version v5.01.

We want to be able to have this something similar to the image below used on different pages. There are 2 variables; link and page title.

[{ name: 'Home', link: '' }]
[{ name: 'Home', link: '/' }, { name: 'Library', link: '' }]
[{ name: 'Home', link: '/' }, { name: 'Library', link: '/library' }, { name: 'Data', link: '/library/data' }]

The default text indicating the current page is without a link. So, no need to pass in value for the link there.

Now, we make the necessary imports and create a component.

import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

const BreadCrumb = ({ pages = [{ name: '', link: '' }] }) => {
    return (
        <>
            <nav aria-label="breadcrumb">
                <ol className="breadcrumb">
                    <li className="breadcrumb-item"><Link to="/">Home</Link></li>
                </ol>
            </nav>
        </>
    )
}

BreadCrumb.propTypes = { pages: PropTypes.arrayOf(PropTypes.object) }

export default BreadCrumb

With this skeleton that we have, what is left to do is add how the data will be managed and presented.

Here is the final version.

// Imports
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

// Breadcrumb component with default values
const BreadCrumb = ({ pages = [{ name: '', link: '' }] }) => {
// Going through a loop to construct the list item of the name and link from the array of objects passed in.
    let breadCrumbs = pages.map((page, index) => {
// If name and link is present in the data.
        if (page.link) return <li key={ index } className="breadcrumb-item">
            <Link to={ page.link }> { page.name }</Link></li>
// If just a name is present in the data.
        return <li key={ index } className="breadcrumb-item active" aria-current="page">{ page.name }</li>
    })

    return (
        <>
            <nav aria-label="breadcrumb">
                <ol className="breadcrumb">
                    <li className="breadcrumb-item"><Link to="/">Home</Link></li>
                    { breadCrumbs }
                </ol>
            </nav>
        </>
    )
}

BreadCrumb.propTypes = { pages: PropTypes.arrayOf(PropTypes.object) }

export default BreadCrumb

With this, you have a reusable breadcrumb component. All the necessary use cases were covered. If you are on the Home page, the view is covered with default empty values. Also, if this component is used in a portal layout and has a page without the 2 variables passed in, covered as well. Now it is up to you to make it as flexible as you'd want in any project and style in whatever form as well.

I implemented this keeping in mind DRY (Don't repeat yourself) and KISS(Keep it simple stupid) principles.

Happy coding!!!