The basic markup for pxh-navigation
looks like this:
<div class="pxh-navigation">
<ul class="pxh-navigation__list">
<li class="pxh-navigation__item">
<a href="#" class="pxh-navigation__link">
<i class="fa fa-dashboard pxh-navigation__item-icon"></i>
<span class="pxh-navigation__item-text">Nav Item One</span>
</a>
<ul class="pxh-navigation__sub-list">
<li class="pxh-navigation__sub-item">
<a href="#" class="pxh-navigation__sub-link">Sub Nav Item One</a>
</li>
<li class="pxh-navigation__sub-item">
<a href="#" class="pxh-navigation__sub-link">Sub Nav Item Two</a>
</li>
</ul>
</li>
<li class="pxh-navigation__item">
<a href="#" class="pxh-navigation__link">
<i class="fa fa-wrench pxh-navigation__item-icon"></i>
<span class="pxh-navigation__item-text">Nav Item Two</span>
</a>
<ul class="pxh-navigation__sub-list">
<li class="pxh-navigation__sub-item">
<a href="#" class="pxh-navigation__sub-link">Sub Nav Item One</a>
</li>
<li class="pxh-navigation__sub-item">
<a href="#" class="pxh-navigation__sub-link">Sub Nav Item Two</a>
</li>
</ul>
</li>
<li class="pxh-navigation__item">
<a href="#" class="pxh-navigation__link">
<i class="fa fa-table pxh-navigation__item-icon"></i>
<span class="pxh-navigation__item-text">Nav Item Three</span>
</a>
<ul class="pxh-navigation__sub-list">
<li class="pxh-navigation__sub-item">
<a href="#" class="pxh-navigation__sub-link">Sub Nav Item One</a>
</li>
<li class="pxh-navigation__sub-item">
<a href="#" class="pxh-navigation__sub-link">Sub Nav Item Two</a>
</li>
</ul>
</li>
</ul>
</div>
To mark a primary navigation link as selected, use Javascript to find the appropriate pxh-navigation__link
-classed element and add the modifier class pxh-navigation__link--selected
to it:
<a href="#" class="pxh-navigation__link pxh-navigation__link--selected">
<i class="fa fa-table pxh-navigation__item-icon"></i>
<span class="pxh-navigation__item-text">Nav Item Three</span>
</a>
To mark a secondary navigation link as selected, use Javascript to find the appropriate pxh-navigation__sub-link
-classed element and add the modifier class pxh-navigation__sub-link--selected
to it:
<a href="#" class="pxh-navigation__sub-link pxh-navigation__sub-link--selected">Sub Nav Item One</a>
To mark a secondary navigation link's parent as active, use Javascript to find the appropriate pxh-navigation__link
-classed element and add the modifier class pxh-navigation__link--active
to it:
<a href="#" class="pxh-navigation__link pxh-navigation__link--active">
<i class="fa fa-table pxh-navigation__item-icon"></i>
<span class="pxh-navigation__item-text">Nav Item Three</span>
</a>
To hide a list of secondary navigation items (so that the user only sees the secondary navigation for their currently selected microapp, for example) use Javascript to find the appropriate pxh-navigation__sub-list
-classed element and add the modifier class pxh-navigation__sub-list--hidden
to it:
<ul class="pxh-navigation__sub-list pxh-navigation__sub-list--hidden">
<li class="pxh-navigation__sub-item">
<a href="#" class="pxh-navigation__sub-link">Sub Nav Item One</a>
</li>
<li class="pxh-navigation__sub-item">
<a href="#" class="pxh-navigation__sub-link">Sub Nav Item Two</a>
</li>
</ul>
To add a divider between secondary navigation items, refer to this markup:
<li class="pxh-navigation__sub-item pxh-navigation__sub-item--divider"></li>
Note that the divider is typically applied to an <li>
element, not an <a>
element.
To add a secondary navigation item that has the alternative "action" (aka "settings") link style, refer to this markup:
<a href="#" class="pxh-navigation__sub-link pxh-navigation__sub-link--settings"></a>