Breadcrumbs are a common metaphor used in web design to indicate to the user what their current location is inside a navigation tree. It is similar to a file path inside Windows Explorer. Breadcrumbs are ideal for a site with many sub-navigation levels, and they allow the user to navigate between the various parent and child pages.

In the following markup, we'll use a combination of Razor and HTML to build a breadcrumb component with which the user can navigate back to the Home page or the Manage page:

 
<ol class="breadcrumb"> 
    <li class="breadcrumb-item"><a href="#">Home</a></li> 
    <li class="breadcrumb-item"><a href="#">Search</a></li> 
    <li class="breadcrumb-item active">Employees</li> 
</ol> 

The preceding markup contains an ordered list <ol> element with a class name of .breadcrumb. Each child element of the breadcrumb is added as a list item <li> element with a class name of .breadcrumb-item. To indicate to the user that the last level of the breadcrumb is the active page, we set its <li> element's class name to .active. The result of the preceding code will look like the following screenshot when visiting the page: