Embedded Files
As you saw in the introduction, it is difficult to understand where you are on a website that lacks breadcrumb navigation. By adding it to a site, users can get a quick feel for where they are on a site.
It also hints at the breadth of the site. If a user sees something like “Fashion > Shoes” in the breadcrumb structure, they could reasonably expect the site contains other clothing items or accessories besides shoes.
Breadcrumbs are usually displayed as a horizontal list of pages and take up minimal space. Users expect to find them in the header, left-aligned, and below any primary navigation. Typically they are separated with a “>” or a “/“ symbol.
Let’s practice setting CSS rules to conform to the expectations for breadcrumb navigation. You will start with a plain looking list, but by the end you will have created a breadcrumb!
Instructions
Instructions
1.Breadcrumbs are typically displayed next to each other, on the same line. First, set the display property to inline for the .breadcrumb > li selector in order to put list items on the same line.
2. Another common feature of breadcrumbs is that they are separated by a symbol, often > or /.
Instead of having to manually add this to all of the breadcrumbs in our breadcrumb trail, we can use a CSS pseudo-element.
This requires some complicated CSS, but it will save us time in the long run!
.breadcrumb li+li::before is the selector that we want! View the hint if you want more information about how this complicated selector works!
In styles.css, find the selector (.breadcrumb li+li::before). Set the content property to “>” to place the greater than sign between each adjacent breadcrumb.
3. Another feature of breadcrumbs is that they are often not underlined. Underlines are used to communicate that text within paragraph elements can be clicked, but we want our users to recognize breadcrumbs as part of the site navigation, rather than just like any other clickable text.
Remove the link underline by changing the text-decoration property of the breadcrumb a selector to have the value none.
4. Breadcrumbs should change when you hover over them to highlight their clickability.
Change the color property of the .breadcrumb a:hover selector to have the value red.
Page updated
Report abuse