KendoReact

React Breadcrumb

  • Add this customizable and accessible React Breadcrumb to your app to offer user-friendly interactive navigation.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.

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

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.