This provides a basic breadcrumb structure that will display like the image below:
In the exercises, you will replicate this behavior for our travel website.
Instructions
In the code to the right, we’ve included the page “Singapore Hotels”. It currently has no breadcrumbs - you’ll be adding them!
The first step is to create an HTML unordered list within index.html below the jumbotron div. The list should have the class of "breadcrumb" and the list items should be “Asia”, “Singapore”, “Tourism”, and “Hotels”.
For now, set the breadcrumb items to link to "#".
Add CSS to breadcrumb.css to configure the display of the breadcrumbs. (We’ve already added a bit of CSS to remove some of the existing styling within style.css).
You can style the breadcrumbs how you like, but at a minimum, it should set the .breadcrumb li elements to display inline and you should use the .breadcrumb li+li::before selector to insert a “>” between the items.
If you’d like to see our approach, please look in the hint.