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>
    accounts: [...],
    currentAccountAlias: '...'

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>
      <a class="navbar-brand" href="/">
        <img src="/img/logo-centurylink.png" alt="CenturyLink" />
      <a class="navbar-service" href="/">Service Name</a>

    <!-- 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>
      <!-- Link back to the Control Portal, and give a sign out link -->
      <ul class="nav navbar-nav navbar-right navbar-account">
        <li><a href="">Control Portal</a></li>
        <li><a href="#" class="navbar-link">Sign Out</a></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->