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:
18.218.212.102