React Breadcrumb

Overview 

The React Breadcrumb component provides users with an easy way to navigate within a folder structure or a web page and trace their way back. Breadcrumbs are often used as a secondary navigation element in collaborative and knowledge-management platforms, ecommerce websites, documentation and more. You can customize the appearance of the component by adding icons (font and custom) to the breadcrumb items, substituting the item with icons or removing them completely, for a fun twist, and changing how the visual separator between the items looks. Fully accessible, the KendoReact Breadcrumb is Section 508 and WAI-ARIA compliant. 

See the React Breadcrumb demo 

React Breadcrumb Component

Appearance 

Out of the box, the KendoReact Breadcrumb component displays each level of navigation as text. To give it a custom look and feel, you can customize each Breadcrumb item to include icons, text and icons or just an icon. 

See the React Breadcrumb appearance demo 

React Breadcrumb Component Appearance

Delimiter 

The Delimiter separates the navigation items in the React Breadcrumb component and is normally rendered as a greater than symbol (>). When your requirements call for a different style, you can create your own delimiter by passing a custom renderer to display the required shape. The possibilities are endless! 

See the React Breadcrumb delimiter demo 

React Breadcrumb Component Delimiter

Disabled Mode 

There may be scenarios where the entire Breadcrumb component or just individual items need to be disabled. This prevents users from interacting with the component and individual elements. You can disable the entire KendoReact Breadcrumb component through a single property, and individual items within the component can be disabled on an item-by-item basis. 

See the React Breadcrumb disabled demo 

React Breadcrumb Component Disabled Mode

Accessibility 

Offering accessible React UI components is a core concept of KendoReact. Out of the box, the React Breadcrumb component is compliant with Section 508 and WAI-ARIA standards and is AAA rated with WCAG 2.0. 

See the React Breadcrumb accessibility demo 

React Breadcrumb Accessibility

All KendoReact Components

Animation
Conversational UI
Data Grid
Data Query
Data Tools
Date Math
Editor
Excel Export
File Saver
Gantt Chart
ListBox
ListView
Notification
PDF Processing
PivotGrid
Popup
Ripple
Scheduler
Sortable
TreeList
TreeView

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.