React Breadcrumb - Simple and Flexible Component

Overview

The React Breadcrumb is a graphical user interface that serves as a navigation header for your web application or site. It helps to identify or highlight the current location within the hierarchical structure of a website. It has several built-in features such as templates, icons, binding to location, overflow mode, and UI customizations.

Breadcrumb item icons

Users tend to understand visual information better than text. Include icons or sprite images to the right or left of the Breadcrumb items to provide a visual representation of their corresponding actions.

• Icons in breadcrumb documentation

UI customization with templates

Templates are used to create custom user experiences. Breadcrumb provides a template for each Breadcrumb item and its separator to customize or change the appearance of the entire Breadcrumb UI with HTML elements or other components.

• Customization example
• Customization documentation

Bind to location

Breadcrumb items can be automatically generated based on the current location of the user within the website or by providing a URL to the Breadcrumb component. The auto generated items can be customized using templates and item render events.

Note: The previous sample is hosted in a different location and Breadcrumb items are generated based on it.

React Breadcrumb Code Example

Easily get started with the React Breadcrumb using a few simple lines of TSX code example as demonstrated below. Also explore our React Breadcrumb Example that shows you how to render and configure a Breadcrumb in React.

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component<{}, {}> {
   public render() {
        return (
            <BreadcrumbComponent enableNavigation={false}>
                <BreadcrumbItemsDirective>
                    <BreadcrumbItemDirective iconCss="e-icons e-home" url="https://ej2.syncfusion.com/home/react.html#platform" />
                    <BreadcrumbItemDirective text="Components" url="https://ej2.syncfusion.com/react/demos/#/material/grid/overview/" />
                    <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/material/menu/default" />
                    <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
                </BreadcrumbItemsDirective>
            </BreadcrumbComponent>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));