Navigation

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

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

Page Header Navigation

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="/">Service Name</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <!-- Link back to the Control Portal, and give a sign out link -->
      <ul class="nav navbar-nav navbar-right navbar-account">
        <li><a href="https://control.ctl.io">Control Portal</a></li>
        <li><a href="#" class="navbar-link">Sign Out</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    
  

Nav Local

Nav local is used to jump between pages fall within the same section or service. If there are secondary pages in a section, then links to those pages are shown inside .dropdown-menu menus. A bold nav label indicates the currently active page in view.

Up to 768px, the 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">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed">
      Menu <svg class="cyclops-icon"><use xlink:href='#icon-caret-down'></svg>
    </button>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li><a href="#navLocal">Events</a></li>
      <li class="active dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#navLocal" role="button" aria-haspopup="true" aria-expanded="false">Policies <svg class="cyclops-icon"><use xlink:href='#icon-caret-down'></svg></a>
        <ul class="dropdown-menu">
          <li class="active"><a href="#navLocal">Alert</a></li>
          <li><a href="#navLocal">Suppression</a></li>
        </ul>
      </li>
      <li><a href="#navLocal">Integrations</a></li>
      <li class="disabled"><a href="#navLocal">Disabled</a></li>
    </ul>
  </div>
</nav>
    
  

Nav Stacked

An alternative to Nav Local, .nav-stacked is designed to to be 100% of the width of its parent grid column. At smaller viewports, each item in the nav will become inline-block and display in a single wrapping line.

    
<div class="nav nav-stacked">
  <ul class="tabs">
    <li class="tab"><a href="#">Home</a></li>
    <li class="tab selected"><a href="#">Products</a></li>
    <li class="tab"><a href="#">Services</a></li>
    <li class="tab"><a href="#">About</a></li>
    <li class="tab"><a href="#">Contact</a></li>
  </ul>
</div>
    
  

Nav Stacked Second Level

A second level maybe added to the Stacked Nav for additional navigation options. However, at small viewports, the second level is not visible. If the second level needs to be visible in all viewport sizes, use the Nav Local pattern instead.

    
<div class="nav nav-stacked">
  <ul class="tabs">
    <li class="tab selected">
      <a href="#">Products</a>
      <ul class="tabs-subnav">
        <li><a href="#">Widget</a></li>
        <li class="selected"><a href="#">Gizmo</a></li>
        <li><a href="#">Snarfblat</a></li>
      </ul>
    </li>
  </ul>
</div>
    
  

Nav Tabs

Nav tabs are useful to display a tabbed set of distinct information related to the main context of the page (e.g. environment variables, logs, and connected services for an Appfog application), but not worth having individual pages. To use, add .nav-tabs to the .nav base class.

    
<ul role="navigation" class="nav nav-tabs">
  <li><a href="#">Link</a></li>
  <li class="active"><a href="#">Active</a></li>
  <li class="disabled"><a href="#">Disabled</a></li>
</ul>