Navigation

Reusable navigation patterns used in the CenturyLink Platform.

Make navs used as navigation accessible.

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Key to a positive customer experience is having a standard header navigation across Platform services. Adopt the page header navigation component for your product to ensure your UI is consistent with the rest of the CenturyLink Platform.

Responsive behavior is built in, so at narrow viewports (portrait tablet or mobile device), the links will collapse into a vertical menu.

    
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <img src="/images/logo-centurylink.png" alt="CenturyLink" />
      </a>
      <a class="navbar-service" href="/">Control Portal</a>
    </div>

    <!-- Support and sign out links -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right navbar-account">
        <li class="dropdown">
          <a href="#" role="button"><span class="sr-only">help and support links</span><svg class="cyclops-icon support"><use xlink:href='#icon8-question-circle' /></svg> <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-caret-down' /></svg></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Open Support Ticket</a></li>
            <li><a href="#">Chat with Support</a></li>
            <li><a href="https://www.ctl.io/knowledge-base">Knowledge Base</a></li>
            <li><a href="https://www.ctl.io/api-docs">API Documentation</a></li>
            <li><p class="dropdown-text">1.877.388.4373</p></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Submit a Feature Idea</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" role="button">trent.anderson <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-caret-down'></svg></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Your Profile</a></li>
            <li><a href="#">Sign Out</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Light Themed Page Header

A lighter themed alternative page header is also available.

    
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">
        <img src="/images/logo-centurylink-light.png" alt="CenturyLink" />
      </a>
      <a class="navbar-service" href="/">Control Portal</a>
    </div>

    <!-- Support and sign out links -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right navbar-account">
        <li class="dropdown">
          <a href="#" role="button"><span class="sr-only">help and support links</span><svg class="cyclops-icon support"><use xlink:href='#icon-question-circle' /></svg> <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-caret-down' /></svg></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Open Support Ticket</a></li>
            <li><a href="#">Chat with Support</a></li>
            <li><a href="https://www.ctl.io/knowledge-base">Knowledge Base</a></li>
            <li><a href="https://www.ctl.io/api-docs">API Documentation</a></li>
            <li><p class="dropdown-text">1.877.388.4373</p></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Submit a Feature Idea</a></li>
          </ul>
          </li>
        <li class="dropdown">
          <a href="#" role="button">trent.anderson <svg class="cyclops-icon" aria-hidden="true"><use xlink:href='#icon-caret-down' /></svg></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Your Profile</a></li>
            <li><button>Sign Out</button></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Persistent Nav Local

Persistent Nav Local is used to navigate between pages that fall within the same service. If there are secondary pages in a service, then links to those pages may be shown inside a .dropdown-menu.

The persisent nav local should be the first element placed inside <main></main> and be visible at the top of every page throughout your application. To make the nav stick at the top of the browser on page scroll, apply sticky positioning. See an example of this on the sample page.

Up to 768px, the persistent nav local is collapsed into a stacked menu. Greater than 768px, it spans the full width of it's container.

    
<nav class="navbar navbar-local navbar-local--persistent">
  <ul class="nav navbar-nav"  data-bind="widget: {name: 'overflowMenu', options: {linkTextAll: 'MENU'}}">
    <li class="logo">
      <a href="/"><svg class="cyclops-icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-runner"></use>
      </svg></a>
    </li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Manual Jobs</a></li>
    <li><a href="#">Schedules</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Help</a></li>
  </ul>
  <div class="navbar-local-right"><a href="#" class="btn btn-primary navbar-btn"><svg class="cyclops-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-plus-circle"></use></svg><span class="sr-only">create</span> item</a></div>
</nav>
anchor link to top of page