NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Breadcrumb

import Breadcrumb from '@concur/nui-widgets/lib/Breadcrumb/Breadcrumb';

Show your visitors their current location within SAP Concur’s application by using the Breadcrumb component. It is important that each bread crumb contain a proper <a> tag or a component which will emit an <a> such as the <Link> component from react-router.

Example

<Breadcrumb
    label='Breadcrumbs'>
    <Breadcrumb.Item>
        <a href='#'>Concur</a>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
        <a href='#'>Expense</a>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
        <a href='#'>Breadcrumb Page</a>
    </Breadcrumb.Item>
</Breadcrumb>

Usage

Properties

Property Type Default Description
label String Required Labels the breadcrumb component for assistive technologies.
children Node   Collection of BreadCrumb Items to render.
className String   Custom classes to be added to the <span> tag.

Properties

Property Type Default Description
children Node   Collection of React components in the BreadCrumb Item.
className String   Custom classes to add to the body’s <div> tag.

Resources