• Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • Fabric
  • Fabric Dark
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
*Translated by Google Translator.
Currency

Example of Default Functionalities in ASP.NET MVC Breadcrumb Control

This sample demonstrates the basic rendering, overflow feature and navigable active item of the Breadcrumb component with icon support.

DEMO
SOURCE
Simple Breadcrumb
Breadcrumb with Overflow
Active Last Breadcrumb

The Breadcrumb component is used as a navigational aid to identify the current page location within the navigational hierarchy structure of websites. It has list of items that can be populated using the Items property.

Simple Breadcrumb

In this sample, the Breadcrumb is populated with Text, Icon, and Url.

Breadcrumb with Overflow

In the Breadcrumb component, MaxItems and OverflowMode properties were used to limit the number of breadcrumb items to be displayed.

The following overflow mode's were available in the Breadcrumb component.

  • Default - Specified MaxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.
  • Collapsed - Only the first and last items will be visible, and the remaining items will be hidden in the collapsed icon. When the collapsed icon is clicked, all items become visible.

In this sample, the MaxItems is set as 3 with OverflowMode as Default. To prevent breadcrumb item navigation we have set false in EnableNavigation property of Breadcrumb component.

Active Last Breadcrumb

In this sample, navigation for the last item is enabled by using EnableActiveItemNavigation property.

More information about Breadcrumb component can be found in this documentation section.