Predix

Notifications
There are no new notifications.

Drawer Navigation

pxh-navigation — view demo

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>

Mark a primary navigation item as "selected"

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>

Mark a secondary navigation item as "selected"

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>

Mark a primary navigation item as "active"

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>

Hide a list secondary navigation items

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>

Add a divider between secondary navigation items

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.

Add an "action" secondary navigation item

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>