Breadcrumbs Last updated: 9/16/21
Breadcrumbs are a list of related links that help with site navigation.
CSS Styling React Components
Base Use the base class pier-breadcrumbs on a wrapper element that wraps many elements with the element class pier-breadcrumbs__crumb which should wrap link elements with the class pier-link.
< div class = "pier-breadcrumbs" >
< div class = "pier-breadcrumbs__crumb" > < a class = "pier-link" > Home< / a> < / div>
< div class = "pier-breadcrumbs__crumb" >
< a class = "pier-link pier-link--disabled" > First Page< / a>
< / div>
< div class = "pier-breadcrumbs__crumb" >
< a class = "pier-link" > Last Page< / a>
< / div>
< / div>
With Ellipsis Use the element class pier-breadcrumbs__ellipsis to indicate a condensed list of crumbs.
< div class = "pier-breadcrumbs" >
< div class = "pier-breadcrumbs__crumb" > < a class = "pier-link" > Home< / a> < / div>
< div class = "pier-breadcrumbs__crumb" >
< span class = "pier-breadcrumbs__ellipsis" > < / span>
< / div>
< div class = "pier-breadcrumbs__crumb" >
< a class = "pier-link" > Last Page< / a>
< / div>
< / div>
Dark Use the modifier class pier-breadcrumbs--dark to change the style of the Breadcrumbs for dark UI themes.
< div class = "pier-breadcrumbs pier-breadcrumbs--dark" >
< div class = "pier-breadcrumbs__crumb" > < a class = "pier-link" > Home< / a> < / div>
< div class = "pier-breadcrumbs__crumb" >
< a class = "pier-link pier-link--disabled" > First Page< / a>
< / div>
< div class = "pier-breadcrumbs__crumb" >
< a class = "pier-link" > Last Page< / a>
< / div>
< / div>
© 2021 Gumgum, Inc.
