PCCW Global Sky Framework

Header navigation

The header navigation is a responsive component that hold navigation options, designed after the PCCW Global branding guidelines and has been specifically defined for use by third-party applications that need to be compliant to the PCCW Global standards.

In order for the header navigation to be implemented properly inside an application, specific layout structure is required that is defined in the page layouts section; the parent container must contain specific styling properties and should be the first descendand of the <body> tag as shown below.

To be certain that the required layout structure is defined properly to accommodate the header navigation, it is strongly recommended that the initial layout structure - including the header navigation component - is replicated after any page layout found in the page layouts section.

The header navigation component is defined as shown in the markup below.

Code output

HTML markup

Copy<!-- body style="width:100%;height:100%;"-->
<div class="wrapper"> <!-- style="display:flex;height:100vh;min-height:100%;"-->
<div class="header">
  <div class="nav-bar">
    <button class="btn btn-nav-toggle"><span class="badge">2</span></button>
    <h1 class="logo"><a href="#"><img src="https://skyframework.pccwglobal.com/img/pccwglobal_r.svg"></a></h1>
    <div class="mobile-nav">
      <ul class="nav nav-left">
        <li class="dropdown">
          <a class="btn-dropdown-toggle" data-toggle="dropdown"><span>Dropdown</span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
          </ul>
        </li>
        <li><a href=#>Option 1</a></li>
        <li><a href=#>Option 2</a></li>
      </ul>
      <ul class="nav nav-right nav-icons">
        <li class="dropdown">
          <a class="btn-dropdown-toggle" data-toggle="dropdown"><span>Notifications</span><i class="sky-icon-notifications"></i><sup class="badge">2</sup></a>
          <ul class="dropdown-menu">
            <li><a href=#>Notification 1</a></li>
            <li><a href=#>Notification 2</a></li>
          </ul>
        </li>
      <li class="dropdown">
          <a class="btn-dropdown-toggle" data-toggle="dropdown"><span>My account</span><i class="sky-icon-account_circle"></i></a>
          <ul class="dropdown-menu">
            <li><a href=#>Option 1</a></li>
            <li><a href=#>Option 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
</div>
<!-- /body -->