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
- Types of Content
- Variations
- Responsive Behavior
- Developer Notes
- Accessibility Notes
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
- White label 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.
White Label Primary Header
Spark offers a white label theme for products that allow customers to configure the look and feel of the application. The following is an example of the Header & Navigation component when pointing to the white label stylesheet.
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
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 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.
The following options may be passed when using new Spark.Header(el, {}); or $(el).sparkHeader({});:
| Name | Type | Default | Description |
|---|---|---|---|
| breakpoints | object | null | An alternate set of breakpoints to use. Should be in the format of
xs: {
min: 0,
max: 639
}
, with the breakpoint names being xs, sm, md, lg, xl. |
| fixed | boolean | false | Should the header affix itself to the top? If not passed, the component will check for the spark-header--fixed class. |
| fixedDistance | number | 10 | The distance (in pixels) the user can scroll before a fixed header sticks. If not passed, the component will check for the data-fixed-distance attribute. |
For all available methods and full API, refer to the component code on Bitbucket.
Primary Header with Sabre Logo
Condensed Header with Sabre Logo
Adding a class of spark-header--condensed will create a header that is smaller than default.
Primary Header with Deep Nested Navigation
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.
This nesting only applies to the collapsed version of the header. Any fourth-level navigation on larger breakpoints should be displayed in a panel menu that is hidden at the xs breapoint.
Primary Header without Sabre Logo
Primary Header - Co-Branded Version
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.
White Label Primary Header
Accessibility Notes
As part of using the Spark Header component, it is important to understand the steps required to make the component fully accessible to users with disabilities or who may be using keyboards or other assistive devices to navigate your site or product.
For Headers that include the Sabre logo or co-branded/whitelabel logos, adding alternate text in conjunction with the logo image helps provide a textual alternative to users who may have visual or other cognitive disabilities. The text alternative will either be read by a screen reader or be presented on the page if images are turned off, depending on the technique used to implement the alternate text.
The examples presented in the Guidelines and Developer tabs include two ways in which alternate text can be implemented.
Headers with a Sabre logo
For the Headers with the Sabre logo, the text “Sabre” is provided within the <i> tag and the
SVG logo image is set as a background image for this element.
Headers with whitelabel or co-branded logos
For co-branded or whitelabel Headers, the brand logo can be set using the above technique, in which case custom CSS would be required to set the appropriate background image and dimensions, and all mentions of “Sabre” changed to the appropriate brand name.
Another approach demonstrated in our examples is the use of an <img> tag to supply the appropriate logo image. In
this technique, alternative text is provided as an image attribute.
Navigation links
For any links that you provide in the header, or anywhere on the page for that matter, ensuring that
they are accessible via keyboard requires ensuring that the links have an href attribute set or
adding a tabindex attribute set to 0 in situations where the href attribute is not used e.g.
ajax-driven functionality. The latter makes the link focusable via keyboard but does not change the
tab order, and additionally maintains the logical navigation flow provided in the HTML markup.
Skip Navigation link
The Spark library provides a helper class for styling a Skip Navigation link. Refer to the CSS Helpers documentation for more information.