Header & Navigation
A header appears on every screen and provides navigation to main sections within the application. It may also include branding and persistent access to links such as a user's profile, settings, search, messages, etc.
Sabre Branded Example
When to Use
- Use a header on every standard page of the application.
- Use the branded version when a close tie to the Sabre brand is preferred.
When Not to Use
- Do not display the header when full pages are displayed within the context of a modal window.
Variations
- Sabre branded example (above)
- Sabre branded condensed example
- No logo example
- Co-branded example
Types of Content
Content included in the header may vary between applications but should be consistent within a single application.
Navigation
- Navigation within the header may include up to three levels. Primary navigation links appear by default (on desktop). Secondary and tertiary links may be displayed in dropdown menus that appear on hover/tap of a primary link.
- For additional levels and/or for navigation options that are displayed on the screen, see the panel menu.
- Each primary link either goes to an independent page or reveals a dropdown menu with secondary and/or tertiary level links relevant to the primary nav link.
Branding
Only include the Sabre logo when a close tie to the Sabre brand is deemed appropriate. In most applications, it is recommended that the Sabre logo appear in the Footer.
User and Application Functions
- Settings
- Sign in/Sign out (access to Profile)
- Search
- Messages and/or Notifications icon
Variations
Condensed Header with Sabre Logo
Primary Header without Sabre Logo
Primary Header - Co-Branded Version
For co-branded products, display the partner company logo in the header (see example below) and the Sabre logo in the Footer.
Responsive Behavior
- View More Menu: This menu (accessed by an ellipsis icon) appears when the primary navigation doesn’t fit within the available space.
- Slide Out Menu: This menu appears on screen sizes below the small breakpoint[ 795px] or if less than 2 links can be shown and is accessed via the hamburger icon.
- Panel menu links should be consolidated with primary navigation on screen sizes below the small breakpoint [ 795px ]. For menus containing more than 3 levels, it is recommended that subsequent levels appear within a deep nested navigation list.
Developer Notes
Primary Header with Sabre Logo
<header class="spark-header">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm"></i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
<button class="spark-header__logout spark-header__collapsed-show">Logout</button>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
<li class="spark-header__list-cta" role="menuitem">
<a href="#" class="spark-header__list-cta-link">View All Analyses</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<div class="spark-header__search spark-menu__list spark-expand">
<a href="#" class="spark-menu__list-item spark-menu__ignore spark-expand__toggle" title="Search" role="menuitem">
<i class="spark-icon--fill spark-icon-search spark-icon--md spark-menu__list-link"></i>
</a>
<form class="spark-header__form spark-header__search-form" onsubmit="return false;">
<span class="spark-input spark-input--sm">
<input class="spark-input__field" name="search" role="textbox" placeholder="Search">
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__search-icon" title="Search"><i class="spark-icon--fill spark-icon-search"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__collapsed-hide spark-expand__toggle" title="Close"><i class="spark-icon--fill spark-icon-close"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-input__clear" title="Clear"><i class="spark-icon--fill spark-icon-close"></i></a>
</span>
</form>
</div>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-margin-top">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-margin-top">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>// Vanilla JS
var el = document.querySelector('.spark-header');
var headerInstance = new Spark.Header(el);
var expandEl = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(expandEl);
var popoverEl = document.querySelector('.spark-popover');
var popoverInstance = new Spark.Popover(popoverEl);
// jQuery
$('.spark-header').sparkHeader();
$('.spark-expand').sparkExpand();
$('.spark-popover').sparkPopover();The header component is a special implementation of the Menu component. It is created using the .spark-header class. The navigation should be wrapped inside of an element with a class of .spark-header__nav. Anything contained outside the navigation element will not be styled automatically and must be addressed by writing custom styles.
Utilization of the Javascript component is essential for the header to function properly. It can be instantiated using new Spark.Header(el) or $(el).sparkHeader().
On a large screen, the navigation is displayed horizontally. Items that do not fit on the screen are collapsed and placed into the “More” tab. In this configuration the .spark-header__toggle and .spark-menu__header elements are hidden. In order to monitor the size of menu items, a duplicate “placeholder” navigation is created and hidden from view. It should never be made visible. If items in the menu change, call the update method on an instance of the Header helper to re-cache the elements and ensure they are properly presented.
On a small screen, the menu is collapsed by default and the .spark-header__toggle element becomes visible.
Condensed Header with Sabre Logo
<header class="spark-header spark-header--condensed">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo" title="Sabre"><i class="spark-logo spark-logo--sabre spark-logo--sm"></i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
<button class="spark-header__logout spark-header__collapsed-show">Logout</button>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item active">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i class="spark-icon--fill spark-icon-world"></i> Global</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Regional</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Historic</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">All</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Wait Times</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Reports</a>
</li>
</ul>
<div class="spark-header__search spark-menu__list spark-expand">
<a href="#" class="spark-menu__list-item spark-menu__ignore spark-expand__toggle" title="Search" role="menuitem">
<i class="spark-icon--fill spark-icon-search spark-icon--md spark-menu__list-link"></i>
</a>
<form class="spark-header__form spark-header__search-form" onsubmit="return false;">
<span class="spark-input spark-input--sm">
<input class="spark-input__field" name="search" role="textbox" placeholder="Search">
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__search-icon" title="Search"><i class="spark-icon--fill spark-icon-search"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__collapsed-hide spark-expand__toggle" title="Close"><i class="spark-icon--fill spark-icon-close"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-input__clear" title="Clear"><i class="spark-icon--fill spark-icon-close"></i></a>
</span>
</form>
</div>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-margin-top">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-margin-top">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>// Vanilla JS
var el = document.querySelector('.spark-header');
var headerInstance = new Spark.Header(el);
var expandEl = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(expandEl);
var popoverEl = document.querySelector('.spark-popover');
var popoverInstance = new Spark.Popover(popoverEl);
// jQuery
$('.spark-header').sparkHeader();
$('.spark-expand').sparkExpand();
$('.spark-popover').sparkPopover();Adding a class of .spark-header--condensed will create a header that is smaller than default.
Primary Header with Deep Nested Navigation
<header class="spark-header spark-header--condensed">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><i class="spark-logo spark-logo--sabre spark-logo--sm"></i></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
<button class="spark-header__logout spark-header__collapsed-show">Logout</button>
</div>
<ul class="spark-menu__list spark-menu__list--main spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item child-active">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link"><i class="spark-icon--fill spark-icon-world"></i> Global</a>
</li>
<li class="spark-menu__list-item child-active">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Regional</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link"><i class="spark-icon--fill spark-icon-world"></i> Global 2</a>
</li>
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link spark-menu__list-link--in-page">(in-page) Regional 2</a>
</li>
<li class="spark-menu__list-item child-active">
<span class="spark-menu__list-links">
<a class="spark-menu__list-link spark-menu__list-next" data-menu="#fourth">Third-level Item IV Alpha</a>
</span>
<ul id="fourth" class="spark-menu__list spark-menu__list-next--target">
<li class="spark-menu__list-item spark-menu__list-item--cta">
<a class="spark-header__list-cta-link spark-menu__list-back">Back to Main Menu</a>
</li>
<li class="spark-menu__list-title">Third-level Item IV Alpha</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fourth-level Item A</a>
</li>
<li class="spark-menu__list-item">
<span class="spark-menu__list-links">
<a class="spark-menu__list-link spark-menu__list-expand">Fourth-level Item B</a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fifth-level Item i</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fifth-level Item ii</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fifth-level Item iii</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link spark-menu__list-link--in-page">(in-page) Fifth-level Item iv</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item child-active">
<span class="spark-menu__list-links">
<a class="spark-menu__list-link spark-menu__list-next" data-menu="#fourth-beta">Third-level Item V Beta</a>
</span>
<ul id="fourth-beta" class="spark-menu__list spark-menu__list-next--target">
<li class="spark-menu__list-item spark-menu__list-item--cta">
<a class="spark-header__list-cta-link spark-menu__list-back">Back to Third-level Item IV Alpha</a>
</li>
<li class="spark-menu__list-title">Third-level Item IV Beta</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fourth-level Item A Beta</a>
</li>
<li class="spark-menu__list-item open child-active">
<span class="spark-menu__list-links">
<a class="spark-menu__list-link spark-menu__list-expand">Fourth-level Item B Beta</a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fifth-level Item i Beta</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fifth-level Item ii Beta</a>
</li>
<li class="spark-menu__list-item active">
<a class="spark-menu__list-link">Fifth-level Item iii Beta</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link spark-menu__list-link--in-page">(in-page) Fifth-level Item iv Beta</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fourth-level Item C Beta</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link spark-menu__list-link--in-page">(in-page) Fourth-level Item D Beta</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item">
<span class="spark-menu__list-links">
<a class="spark-menu__list-link spark-menu__list-next" data-menu="#fourth-Charlie">Third-level Item V Charlie</a>
</span>
<ul id="fourth-Charlie" class="spark-menu__list spark-menu__list-next--target">
<li class="spark-menu__list-item spark-menu__list-item--cta">
<a class="spark-header__list-cta-link spark-menu__list-back">Back to Third-level Item IV Alpha</a>
</li>
<li class="spark-menu__list-title">Third-level Item IV Charlie</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fourth-level Item A Charlie</a>
</li>
<li class="spark-menu__list-item">
<span class="spark-menu__list-links">
<a class="spark-menu__list-link spark-menu__list-expand">Fourth-level Item B Charlie</a>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fifth-level Item i Charlie</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fifth-level Item ii Charlie</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fifth-level Item iii Charlie</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link spark-menu__list-link--in-page">(in-page) Fifth-level Item iv Charlie</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fourth-level Item C Charlie</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link spark-menu__list-link--in-page">(in-page) Fourth-level Item D Charlie</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link">Fourth-level Item C</a>
</li>
<li class="spark-menu__list-item">
<a class="spark-menu__list-link spark-menu__list-link--in-page">(in-page) Fourth-level Item D</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link">Historic 2</a>
</li>
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link">All 2</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link spark-menu__list-link--in-page">(in-page) Historic</a>
</li>
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link">All</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
</li>
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link">Wait Times</a>
</li>
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link">Reports</a>
</li>
</ul>
<div class="spark-header__search spark-menu__list spark-expand">
<a href="#" class="spark-menu__list-item spark-menu__ignore spark-expand__toggle" title="Search">
<i class="spark-icon--fill spark-icon-search spark-icon--md spark-menu__list-link"></i>
</a>
<form class="spark-header__form spark-header__search-form" onsubmit="return false;">
<span class="spark-input spark-input--sm">
<input class="spark-input__field" name="search" role="textbox" placeholder="Search">
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__search-icon" title="Search"><i class="spark-icon--fill spark-icon-search"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__collapsed-hide spark-expand__toggle" title="Close"><i class="spark-icon--fill spark-icon-close"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-input__clear" title="Clear"><i class="spark-icon--fill spark-icon-close"></i></a>
</span>
</form>
</div>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-margin-top">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-margin-top">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>// Vanilla JS
var el = document.querySelector('.spark-header');
var headerInstance = new Spark.Header(el);
var expandEl = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(expandEl);
var popoverEl = document.querySelector('.spark-popover');
var popoverInstance = new Spark.Popover(popoverEl);
// jQuery
$('.spark-header').sparkHeader();
$('.spark-expand').sparkExpand();
$('.spark-popover').sparkPopover();By adding a class of spark-menu__list-next to a list item, as well as providing an attribute data-menu set to the id of the targeted nested list. Along with an id, the nested list will need a class of spark-menu__list-next--target.
The first item of the list needs to be a back button to move back one level. Use a spark-menu__list-item--cta item and give the anchor a spark-menu__list-back class.
The second item of the list should be the title of the parent level. Give this list item a class of spark-menu__list-title.
Primary Header without Sabre Logo
<header class="spark-header spark-header--no-logo">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
<i class="spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" title="Hide Navigation">
<i class="spark-icon-close"></i>
</button>
<span class="spark-menu__title"></span>
<button class="spark-header__logout spark-header__collapsed-show">Logout</button>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item active" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link" role="menuitem">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item">
<a href="#" class="spark-menu__list-link" role="menuitem"><i class="spark-icon-world"></i> Global</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Regional</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Historic</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">All</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Wait Times</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Reports</a>
</li>
</ul>
<div class="spark-header__search spark-menu__list spark-expand">
<a href="#" class="spark-menu__list-item spark-menu__ignore spark-expand__toggle" title="Search" role="menuitem">
<i class="spark-icon--fill spark-icon-search spark-icon--md spark-menu__list-link"></i>
</a>
<form class="spark-header__form spark-header__search-form" onsubmit="return false;">
<span class="spark-input spark-input--sm">
<input class="spark-input__field" name="search" role="textbox" placeholder="Search">
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__search-icon" title="Search"><i class="spark-icon--fill spark-icon-search"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__collapsed-hide spark-expand__toggle" title="Close"><i class="spark-icon--fill spark-icon-close"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-input__clear" title="Clear"><i class="spark-icon--fill spark-icon-close"></i></a>
</span>
</form>
</div>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary" role="menuitem">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon-cog"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-margin-top">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-margin-top">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>// Vanilla JS
var el = document.querySelector('.spark-header');
var headerInstance = new Spark.Header(el);
var expandEl = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(expandEl);
var popoverEl = document.querySelector('.spark-popover');
var popoverInstance = new Spark.Popover(popoverEl);
// jQuery
$('.spark-header').sparkHeader();
$('.spark-expand').sparkExpand();
$('.spark-popover').sparkPopover();Primary Header - Co-Branded Version
<style>
#cobranded .spark-header__logo,
#cobranded .spark-header__toggle,
#cobranded .spark-menu__header,
#cobranded .spark-menu__toggle {
background-color: #333333;
}
#cobranded .spark-header__logo::after {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDMiIGhlaWdodD0iOTYiIHZpZXdCb3g9IjAgMCA0MyA5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwaDQzTDAgOTZWMHoiIGZpbGw9IiMzMzMzMzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPiAg")
}
#jetblue-header--logo {
bottom: -2px;
height: 2rem;
margin-top: 4px;
position: relative;
}
</style>
<header id="cobranded" class="spark-header">
<nav class="spark-header__nav" role="navigation">
<button class="spark-menu__toggle spark-header__toggle" title="View Navigation">
<i class="spark-icon--fill spark-icon-menu-hamburger spark-icon--md"></i>
</button>
<span class="spark-header__logo"><img src="../images/jetblue-logo--white.png" alt="jetBlue"></span>
<a href="#" class="spark-header__title">Product™</a>
<div class="spark-menu spark-header__menu" role="menu">
<div class="spark-menu__header">
<button class="spark-menu__toggle" title="Hide Navigation">
<i class="spark-icon--fill spark-icon-close"></i>
</button>
<span class="spark-menu__title"><img src="../images/jetblue-logo--white.png" alt="jetBlue"></span>
<button class="spark-header__logout spark-header__collapsed-show">Logout</button>
</div>
<ul class="spark-menu__list spark-header__list spark-header__list--overflow">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Dashboard</a>
</li>
<li class="spark-menu__list-item active" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Market Analysis</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<span class="spark-menu__list-links">
<a href="#" class="spark-menu__list-link">Menu Option 2</a>
<button class="spark-menu__list-expand" role="menuitemcheckbox" title="Expand"></button>
</span>
<ul class="spark-menu__list">
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 1</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 2</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Sub Nav Item 4 That Has A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 3</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link"><i class="spark-icon-announce"></i> Menu Option 4 w/ Icon</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Menu Option 5 w/ A Really Long Title</a>
</li>
</ul>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Flight Analysis</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 8</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 9</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 10</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 11</a>
</li>
<li class="spark-menu__list-item" role="menuitem">
<a href="#" class="spark-menu__list-link">Nav Item 12</a>
</li>
</ul>
<div class="spark-header__search spark-menu__list spark-expand">
<a href="#" class="spark-menu__list-item spark-menu__ignore spark-expand__toggle" title="Search">
<i class="spark-icon--fill spark-icon-search spark-icon--md spark-menu__list-link"></i>
</a>
<form class="spark-header__form spark-header__search-form" onsubmit="return false;">
<span class="spark-input spark-input--sm">
<input class="spark-input__field" name="search" role="textbox" placeholder="Search">
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__search-icon" title="Search"><i class="spark-icon--fill spark-icon-search"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-header__collapsed-hide spark-expand__toggle" title="Close"><i class="spark-icon--fill spark-icon-close"></i></a>
<a href="#" class="spark-input__addon spark-input__addon-button spark-input__clear" title="Clear"><i class="spark-icon--fill spark-icon-close"></i></a>
</span>
</form>
</div>
<ul class="spark-menu__list">
<li class="spark-menu__list-item spark-menu__list-item--secondary">
<a href="#" class="spark-menu__list-link spark-menu__ignore">
<i class="spark-icon--fill spark-icon-cog spark-icon--md"></i>
<span class="spark-header__collapsed-show">Account Settings</span>
</a>
</li>
</ul>
</div>
<div class="spark-header__sign-in spark-popover">
<a href="#" class="spark-menu__list-link spark-popover__toggle">Sign In</a>
<form class="spark-popover__content--bottom col-xs-8 col-md-4" role="tooltip" onsubmit="return false;" data-anchor-x="right">
<a href="#" class="spark-popover__close" title="Close"></a>
<h4>Account Sign In</h4>
<label class="spark-input spark-margin-top">
<input class="spark-input__field" name="username" role="textbox">
<span class="spark-label">Username</span>
</label>
<label class="spark-input">
<input class="spark-input__field" name="password" type="password" role="textbox">
<span class="spark-label">Password</span>
</label>
<button class="spark-btn spark-btn--md spark-btn--block">Sign In</button>
<div class="spark-text-center spark-margin-top">
<button class="spark-btn--link spark-eta">Forgot username or password?</button>
</div>
<span class="spark-popover__caret"></span>
</form>
</div>
</nav>
</header>// Vanilla JS
var el = document.querySelector('.spark-header');
var headerInstance = new Spark.Header(el);
var expandEl = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(expandEl);
var popoverEl = document.querySelector('.spark-popover');
var popoverInstance = new Spark.Popover(popoverEl);
// jQuery
$('.spark-header').sparkHeader();
$('.spark-expand').sparkExpand();
$('.spark-popover').sparkPopover();As you can see in the example code, there are only a few styles to override to achieve a co-branded header. First swap out the logo with either an image file in .spark-header__logo or update the svg uri in the .spark-header__logo::after. Then, you will need to change the background color of the .spark-header__logo, .spark-header__toggle, .spark-menu__header, and .spark-menu__toggle to match the co-branded company’s colors.