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.

Account Switcher api documentation

The CenturyLink Platform supports the ability to create sub-accounts, which fall under a parent account. Sub accounts have of the advantage of:

  • Hierarchy: user permissions flow down, but not up or sideways
  • Billing: sub accounts may be billed separately or to the parent account
  • Share Parent Networks: sub accounts may access their parent account's networks, in addition to their own network
  • Inheritance: account settings are inherited

If a user has access to multiple accounts, their account context needs to be maintained as they navigate to different platform satellite apps. This component is a means for platform customers to view their current account context, change account context, and maintain that context across CenturyLink Platform satelite apps.

Keyboard Shortcuts

  • ctl + i: toggle account switcher open or closed
  • esc: close account switcher when open
  • up, down: navigate the list of accounts
  • enter: change to selected account context

In the iframe below, click the top bar to open the account switcher.

Open Example Page 

    
<account-switcher params="{accounts: accounts, currentAccountAlias: currentAccountAlias}"></account-switcher>
    
    
$(function(){
  ko.applyBindings({
    accounts: [...],
    currentAccountAlias: '...'
  });
});

Pane Tree View api documentation

The Pane Tree View provides a way to navigate hierarchical entities with expand/collapse and filtering functionality built-in. It begins collapsed in mobile views, with a toggle button to expand. On desktop or tablets views, the pane tree view begins in a vertical orientation on the left side of the viewport. It expects an object of items (e.g. groups and servers, appfog spaces and apps) and a selected item to highlight the selected item in the tree view.

To add a pane tree view to a page, use the custom <pane>...</pane> html component and apply the bindings. Immediately preceding the <pane>, use <main><div class="container-fluid">...</div></main> to wrap the page body content. This will apply proper spacing and margin between the pane and the body content.

The Pane Tree View provides basic functionality. The implementator is responsible for loading data, choosing icons, etc. Please see the API documentation for more details.

Open Example Page 

    
<pane params="{items: items, selectedItemId: selectedItemId}"></pane>
<main>
  <div class="container-fluid">
    <!--body content of the page-->
  </div>
</main>
    
    
ko.applyBindings({
     items: ko.observableArray([...]),
     selectedItemId: ko.observable("QA1WEBSERVER02")
});

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-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="/img/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>

Inverse Themed Page Header

An inverse 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="/img/CenturyLink_logo_white_text.svg" 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>

Inverse Persistent Nav Local

An inverse themed alternative page header is also available.

    
<nav class="navbar navbar-local navbar-local--persistent navbar-inverse">
  <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-success 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