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

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

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-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="/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"><svg class="cyclops-icon support"><use xlink:href='#icon-question-circle'></svg> <svg class="cyclops-icon"><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"><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>