Simple Example of Breadcrumbs

[oldoc63]

• By adding breadcrumbs to a site, users can get a quick feel for where they are on a site.
• 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.

[oldoc63]

• 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.

[oldoc63]

• 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!
• In styles.css, find the selector and set the content property to “>” to place the greater than sign between each adjacent breadcrumb.

[oldoc63]

• The + is called the adjacent sibling combinator; it will only select two li‘s when they are immediately next to each other, with the same parent. The element that actually gets selected is the second element of this sibling pair.
• The ::before part of this selector creates a pseudo-element. The ::before pseudo-element is often used with the content property, to add content that will be displayed just before the selected element.

[oldoc63]

• 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.

[oldoc63]

• 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.