Navigation Last updated: 7/17/21
The Navigation component is used as a persistant list of links to various pages on a website.
CSS Styling React Components
Structure Use the base class pier-nav to wrap the elements inside of the Navigation. Use pier-nav__item-group to group links inside of the Navigation. Use pier-nav__item for first level links or wrap it in a parent element with the class pier-nav__item-container with a sibling element pier-nav__item-dropdown if the item has nested sub-items. Use either pier-nav__sub-item or pier-nav__sub-label inside the nested item dropdown. Follow the example closely below for proper navigation structure.
< div class = "pier-nav" >
< h3 class = "pier-heading pier-heading--sm" style= "padding:24px" >
Navigation
< / h3>
< div class = "pier-nav__item-group" >
< div class = "pier-nav__item-container" >
< span class = "pier-nav__item-dropdown-toggle" > < / span>
< div class = "pier-nav__item" >
< span class = "pier-nav__item-icon fas fa-file" > < / span> Item
< / div>
< div class = "pier-nav__item-dropdown" >
< div class = "pier-nav__sub-item" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< div class = "pier-nav__sub-item" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< / div>
< / div>
< div class = "pier-nav__item-container" >
< span
class = "
pier- nav__item- dropdown- toggle
pier- nav__item- dropdown- toggle-- toggled
"
> < / span>
< div class = "pier-nav__item" >
< span class = "pier-nav__item-icon fas fa-chart-area" > < / span> Item
< / div>
< div class = "pier-nav__item-dropdown" >
< div class = "pier-nav__sub-label" > Sub- Label< / div>
< div class = "pier-nav__sub-item" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< div class = "pier-nav__sub-item" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< / div>
< / div>
< div class = "pier-nav__item" >
< span class = "pier-nav__item-icon fas fa-bread-slice" > < / span> Item
< / div>
< div class = "pier-nav__item-container" >
< div class = "pier-nav__item-dropup" >
< div class = "pier-nav__sub-item" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< div class = "pier-nav__sub-item" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< / div>
< span
class = "
pier- nav__item- dropup- toggle
pier- nav__item- dropup- toggle-- toggled
"
> < / span>
< div class = "pier-nav__item" >
< span class = "pier-nav__item-icon fas fa-chart-area" > < / span> Item
< / div>
< / div>
< / div>
< / div>
Dark Use the base class pier-nav to wrap the elements inside of the Navigation. Use pier-nav__item-group to group links inside of the Navigation. Use pier-nav__item for first level links or wrap it in a parent element with the class pier-nav__item-container with a sibling element pier-nav__item-dropdown if the item has nested sub-items. Use either pier-nav__sub-item or pier-nav__sub-label inside the nested item dropdown. Follow the example closely below for proper navigation structure.
< div class = "pier-nav pier-nav--dark" >
< h3
class = "pier-heading pier-heading--sm pier-heading--dark"
style= "padding:24px"
>
Navigation
< / h3>
< div class = "pier-nav__item-group" >
< div class = "pier-nav__item-container" >
< span
class = "
pier- nav__item- dropdown- toggle
pier- nav__item- dropdown- toggle-- dark
"
> < / span>
< div class = "pier-nav__item pier-nav__item--dark" >
< span class = "pier-nav__item-icon fas fa-file" > < / span> Item
< / div>
< div class = "pier-nav__item-dropdown" >
< div class = "pier-nav__sub-item" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< div class = "pier-nav__sub-item" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< / div>
< / div>
< div class = "pier-nav__item-container" >
< span
class = "
pier- nav__item- dropdown- toggle
pier- nav__item- dropdown- toggle-- toggled
"
> < / span>
< div class = "pier-nav__item pier-nav__item--dark" >
< span class = "pier-nav__item-icon fas fa-chart-area" > < / span> Item
< / div>
< div class = "pier-nav__item-dropdown" >
< div class = "pier-nav__sub-label" > Sub- Label< / div>
< div class = "pier-nav__sub-item pier-nav__sub-item--dark" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< div class = "pier-nav__sub-item pier-nav__sub-item--dark" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< / div>
< / div>
< div class = "pier-nav__item pier-nav__item--dark" >
< span class = "pier-nav__item-icon fas fa-bread-slice" > < / span> Item
< / div>
< div class = "pier-nav__item-container" >
< div class = "pier-nav__item-dropup" >
< div class = "pier-nav__sub-item pier-nav__sub-item--dark" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< div class = "pier-nav__sub-item pier-nav__sub-item--dark" >
< div class = "pier-nav__sub-item-line" > < / div>
Sub- Item
< / div>
< / div>
< span
class = "
pier- nav__item- dropup- toggle
pier- nav__item- dropup- toggle-- toggled
"
> < / span>
< div class = "pier-nav__item pier-nav__item--dark" >
< span class = "pier-nav__item-icon fas fa-chart-area" > < / span> Item
< / div>
< / div>
< / div>
< / div>
© 2021 Gumgum, Inc.
