Icons in React Breadcrumb

4 Sep 202620 minutes to read

The React Breadcrumb component supports icons and images to provide visual representation and enhance navigation context for each item. Icons can be implemented using font icons, custom images, or SVG graphics through the iconCss property, with flexible positioning options to suit different design requirements.

Loading icon in React Breadcrumb items

To load icons on React Breadcrumb items, configure the iconCss property with the appropriate CSS class or styling.

React Breadcrumb with Font Icon

To place font icons on React Breadcrumb items, set the iconCss property to e-icons with the required icon CSS class. By default, icons are positioned to the left side of the item text.

index.jsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    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/#/tailwind3/grid/overview/"/>
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/menu/default"/>
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default"/>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    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/#/tailwind3/grid/overview/" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/menu/default" />
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

React Breadcrumb with Image

In the React Breadcrumb component, images can be added to items using the iconCss property. In the following example, an image is added to the React Breadcrumb item using the iconCss class e-image-home with specified height and width dimensions.

index.jsx

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

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    return (
        <BreadcrumbComponent enableNavigation={false}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective iconCss="e-image-home" url="https://ej2.syncfusion.com/home/react.html#platform" />
                <BreadcrumbItemDirective text="Components" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/overview/" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/menu/default" />
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

React Breadcrumb with SVG Image

In the React Breadcrumb component, SVG images can be added to items using the iconCss property. In the following example, an SVG image is added to the React Breadcrumb item using the iconCss class e-svg-home with specified height and width dimensions.

index.jsx

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

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    return (
        <BreadcrumbComponent enableNavigation={false}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective iconCss="e-svg-home" url="https://ej2.syncfusion.com/home/react.html#platform" />
                <BreadcrumbItemDirective text="Components" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/overview/" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/menu/default" />
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Icon Position

By default, icons are positioned to the left side of the item text in the React Breadcrumb component. To position icons to the right of React Breadcrumb items, add the e-icon-right class to the required item. In the following example, the e-icon-right class is added to React Breadcrumb items using the beforeItemRender event.

index.jsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    function beforeItemRenderHandler(args) {
        if (args.element) {
            args.element.classList.add('e-icon-right');
        }
    }
    return (<div id="breadcrumb-control">
        <div class='header'><b>IconPosition- left</b></div><br />
        <BreadcrumbComponent>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Program Files" iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Services" iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Config.json" iconCss="e-bicons e-file"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
        <br />
        <br />
        <div class='header'><b>IconPosition- Right</b></div><br />
        <BreadcrumbComponent beforeItemRender={beforeItemRenderHandler}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Program Files" iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Services" iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Config.json" iconCss="e-bicons e-file"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent></div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import { BreadcrumbBeforeItemRenderEventArgs } from '@syncfusion/ej2-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    function beforeItemRenderHandler(args: BreadcrumbBeforeItemRenderEventArgs): void {
        if (args.element) {
          args.element.classList.add('e-icon-right');
        }
    }
    return (<div id="breadcrumb-control">
        <div class='header'><b>IconPosition- left</b></div><br />
        <BreadcrumbComponent>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Program Files" iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Services" iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Config.json" iconCss="e-bicons e-file"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
        <br />
        <br/>
        <div class='header'><b>IconPosition- Right</b></div><br />
        <BreadcrumbComponent beforeItemRender={beforeItemRenderHandler}>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective text="Program Files" iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Services" iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective text="Config.json" iconCss="e-bicons e-file"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent></div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Icon Only

To display only icons for items without text, add icons using the iconCss property while omitting the text property. In the following example, React Breadcrumb items are demonstrated with only icons by providing the iconCss property.

index.jsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<BreadcrumbComponent>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective iconCss="e-icons e-home"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective iconCss="e-bicons e-file"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    return (
        <BreadcrumbComponent>
            <BreadcrumbItemsDirective>
                <BreadcrumbItemDirective iconCss="e-icons e-home"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective iconCss="e-bicons e-folder"></BreadcrumbItemDirective>
                <BreadcrumbItemDirective iconCss="e-bicons e-file"></BreadcrumbItemDirective>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Show icon only for first item

To display an icon only for the first item in the React Breadcrumb component, add icons to the first item using the iconCss property while leaving other items without icons. In the following example, the icon is provided only for the first item by setting the iconCss property.

index.jsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    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/#/tailwind3/grid/overview/"/>
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/menu/default"/>
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default"/>
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));

index.tsx

import { BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemsDirective } from '@syncfusion/ej2-react-navigations';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {

    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/#/tailwind3/grid/overview/" />
                <BreadcrumbItemDirective text="Navigations" url="https://ej2.syncfusion.com/react/demos/#/tailwind3/menu/default" />
                <BreadcrumbItemDirective text="Breadcrumb" url="./breadcrumb/default" />
            </BreadcrumbItemsDirective>
        </BreadcrumbComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));