A breadcrumb is used to indicate the current page's location within a navigational hierarchy which allows users to keep track their locations within websites. Bootstrap automatically adds separators via CSS.
<ol> element and apply
.breadcrumb class. Add
.breadcrumb-item class for
<li> items and additionally add
.active class to the last item which indicates the current page.
Since breadcrumbs provide a navigation giving meaningful text it would be useful for the non-visual users. Add
aria-label="breadcrumb" to describe the type of navigation in the
<nav> element and apply
aria-current="page" to the last
<li> item to indicate that it represents the current page.