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 Header
- Examples
- Types of Content
- Examples
- Responsive Behavior
- Developer Notes
- Accessibility Notes
Sabre-Branded Header
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.
Examples
- Sabre-Branded Header (shown above)
- Condensed Header with Sabre Logo
- Header without Sabre Logo
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
Examples
Condensed Header with Sabre Logo
Header without Sabre Logo
Fixed Header with Scroll Behavior
This header is fixed initially, but disappears when scrolling toward the bottom of the page and reappears when scrolling toward the top of the page.
When to Use
- Use on data-dense displays and smaller screens, to allow more content to appear within the viewport when scrolling down.
Co-Branded Header
For co-branded products, display the partner company logo in the header (see example below) and the Sabre logo in the Footer.
White-Label 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).
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, {});:
For all available methods and full API, refer to the component code on Bitbucket.
Sabre-Branded Header
Condensed Header with Sabre Logo
Adding a class of spark-header--condensed will create a Header that is smaller than default.
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.
Header without Sabre Logo
Fixed Header with Scroll Behavior
Condensed Header with Scroll Behavior
Co-Branded Header
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 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.
Icon Buttons
The spark-menu__toggle buttons used within the Header require the aria-label attribute to allow assistive technologies to provide a description of the buttons to users.
Icons as Links
When using Spark Icons within links where text labels are not displayed or are only displayed in some certain viewports, it is important to include aria-label attributes to ensure that a description of the link is always available to assistive technologies. In the example below extracted from the secondary menu within the Header component, the Account Settings label is only visible on the screen in smaller viewports where the Header is collapsed i.e. in hamburger menu format. On larger screens, this label is not visible so an aria-label that matches the text label is set on the link element that encapsulates the icon as well as text label.