Close

Breadcrumb with wrapping arrows

This is an example of a classic breadcrumb navigation line with wrapping arrows, designed using HTML, and CSS. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the breadcrumbs in an ordered list. The body of the form is given a style set of background as #9ad4e2, font-family as sans-serif, padding as 10px, and margin as 0 whereas header one is given the styles font-weight as lighter, and color as #c8f1fe. li:last-child > *:before {background: #9ad4e2;} has been used to cover the arrow tails with the background color and li:last-child > * {background: #76cae6;color: #fff} is used to highlight the last child of the list. The button faces are given a background color of #c8f1fe, display as inline-block, and a font-size of 16px. The font color for the breadcrumbs is set as #253e6a except for the last child, which has the font color #fff. https://codepen.io/fgnass/pen/ehAlq

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *