This sample demonstrates the basic rendering, overflow feature and navigable active item of the Breadcrumb component with icon support.
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
In this sample, the
Breadcrumb is populated with Text, Icon, and Url.
Breadcrumb with Overflow
overflowMode properties were used to limit the number of breadcrumb items to be displayed.
The following overflow mode's were available in the
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
enableNavigation property of
Active Last Breadcrumb
In this sample, navigation for the last item is enabled by using
More information about
Breadcrumb component can be found in this documentation section.