Polaris

The global header and footer navigation for all things Xfinity.

To read more of our documentation, click here.

Installation

Polaris is a small collection of Custom Elements that can be easily included and used in an html file.
To load the global nav version of Polaris, add the following in the <head> of your document. For staging environments, use https://polaris.staging.xfinity.com/.

1
2
3
4
5
6
7
8
9
 
<script>
  const polarisScript = document.createElement("script");
  polarisScript.src = "https://polaris.xfinity.com/globalnav/polaris.' + (window.customElements ? 'wc' : 'es5') + '.js";
  polarisScript.async = true;
  document.head.appendChild(polarisScript);
</script>
<style>
  xc-header { display: block; min-height: 64px; background: #fff; }
</style>

To load the NOW version of Polaris, add the following in the <head> of your document. For staging environments, use https://polaris.staging.xfinity.com/.

1
2
3
4
5
6
7
8
9
 
<script>
  const polarisScript = document.createElement("script");
  polarisScript.src = "https://polaris.xfinity.com/now/polaris.' + (window.customElements ? 'wc' : 'es5') + '.js";
  polarisScript.async = true;
  document.head.appendChild(polarisScript);
</script>
<style>
  xc-header { display: block; min-height: 64px; background: #fff; }
</style>

NOTE: We use client side detection to determine if your browser supports custom elements to return a polyfill for older browsers or not. Also, polaris is loaded async, so you don’t have to worry about it blocking rendering on your site. The style tag adds a default size to header to avoid FOUC.

Quick Start

If you followed the Installation guide above, you now have access to two new tags, <xc-header> and <xc-footer>. They can be added to the top and bottom of the <body> tag, respectively.

1
2
3
 
<xc-header client-id="YOUR-CLIENT-ID"></xc-header>
<!-- Your site code goes here... -->
<xc-footer client-id="YOUR CLIENT-ID"></xc-footer>

The client-id attribute is used by Polaris to identify your application. There is no registration required, simply choose a value and add to xc-header and xc-footer (must be consistent).

Polaris has extensive configuration capabilities. Please reach out to the Polaris team for additional information.