ba-header
A header component with options to show search, login, navigation, current country and language
Component deprecated
This component will be removed in a future release. This is due to a new more full featured header component being created.
The header must be the first item on the page. This is because the header signals the start of the page, letting the user know there content to follow.
As the component uses the <header></header> tag, the component should be placed above the main tag on a page.
Either the the ba-logo or an svg can be used for the logo slot. This is to give flexibility on what can be used.
Skip navigation links are useful to give screen reader and keyboard users the same capability of navigating directly to the main content. Consider users with no or limited arm movement who navigate a web page by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action numerous times before reaching the main content poses an accessibility barrier.
Further reading:
The component uses the banner role to indicate to screen readers that it is a navigational landmark. It also indicates that the content should be site specific, not page specific.
Further reading:
The nav menu uses the navigation role to indicate to screen readers that it is a navigational landmark. It also enables user agents that do not support HTML5 to understand the structure.
Further reading:
For any links that are passed into <ba-header-section> or <ba-header-list> use the aria-current attribute with a value of page for the currently active link.
If <ba-header-section> is being used as a top level link, use the current-url prop instead.
This will help with orientation when inside the menu.
More info can be found below:
Any logos used should be clickable and have alternate text provided. The alternate text can be provided on <ba-logo> or with the visually hidden text utility class if using an svg.
Visually hidden text utility class: ba-u-visually-hidden-text
Voiceover does not announce an item as expanded if the element also has the 'aria-haspopup' attribute
The functionality still works correctly, however Voiceover just doesn't announce that it has been expanded. More info below:
aria-haspopup and screen readers
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
countryHref * |
country-href |
Link for the country selector | string | undefined |
'' |
countryIsoCode * |
country-iso-code |
Country code for the flag | string | undefined |
'' |
countryName * |
country-name |
Country name | string | undefined |
'' |
language * |
language |
The selected language | string | undefined |
'' |
searchHref |
search-href |
The link for the search page | string | undefined |
'' |
loginHref |
login-href |
The link for the login page | string | undefined |
'' |
logoutHref + |
logout-href |
The link for the logout page | string | undefined |
'' |
userAccountHref + |
user-account-href |
The link for the user account page | string | undefined |
'' |
username + |
username |
The name of the logged in user to show in the menu | string | undefined |
'' |
* In order to display the country/language in the header all of these attributes marked with * must be populated
+ In order to display the logged out state in the header all of these attributes marked with + must be populated
Events
| Event | Description | Type |
|---|---|---|
ba-header-account-click |
Account link click event | CustomEvent<MouseEvent> |
ba-header-country-changer-click |
Country changer click event | CustomEvent<MouseEvent> |
ba-header-login-click |
Login link click event | CustomEvent<MouseEvent> |
ba-header-logout-click |
Logout link click event | CustomEvent<MouseEvent> |
ba-header-menu-close |
Mobile menu close event | CustomEvent<MouseEvent> |
ba-header-menu-open |
Mobile menu open event | CustomEvent<MouseEvent> |
ba-header-search-click |
Search button click event | CustomEvent<MouseEvent> |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
"logo" |
A logo to show in the header | <a>, <ba‑logo>, <svg> |
| Unnamed slot | Elements will render in the body of the component | <ba‑header‑global> |
Usage
Adding a logo
Either an svg or ba-logo can be assigned to the "logo" slot to add a logo to the header
<ba-header>
<ba-logo slot="logo" name="british-airways"></ba-logo>
</ba-header>
Multiple Logos
Multiple logos can also be added/used. Spacing for multiple logos is handled within the component.
<ba-header>
<ba-logo slot="logo" name="british-airways"></ba-logo>
<ba-logo slot="logo" name="oneworld"></ba-logo>
</ba-header>
Showing login/logout states
To show the login button simply add a link to the login page with the login-href prop.
Once logged in add the links for logout and the users account to the logout-href and user-account-href props.
Finally add the users username to the username prop.
The login and logout parameters can be used at the same time, however only the login button will show.
<ba-header login-href="/login" logout-href="/logout" username="Bob" user-account-href="/user-account">
<ba-logo slot="logo" name="british-airways"></ba-logo>
<ba-logo slot="logo" name="oneworld"></ba-logo>
</ba-header>
Adding navigation with the <ba-header-section> component
To add a navigation menu a new component can be used. The <ba-header-section> component can use <ba-grid>, <ba-content> and <ba-header-list> to build any kind of navigation you wish.
It can also take three props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
currentUrl |
current-url |
The currently active url | boolean | undefined |
false |
heading (required) |
heading |
The title of the nav section | string |
undefined |
href |
href |
A link for the main title | string | undefined |
'' |
<ba-header>
<ba-header-section heading="Discover">
<ba-content>
<ul>
<li>
<a href="test 1">BA</a>
</li>
<li><a href="test 2">About BA</a></li>
<li><a href="test 3">BA Better World</a></li>
<li><a href="test 3">The BA Experience</a></li>
<li><a href="test 3">Travel Classes</a></li>
<li><a href="test 3">Whats New</a></li>
<li><a href="test 3">Our Business</a></li>
<li><a href="test 3">Partners and alliances</a></li>
</ul>
</ba-content>
</ba-header-section>
</ba-header>
Adding top level links with <ba-header-section>
If only a simple navigation menu is required without a dropdown. <ba-header-section> can be used with the href property to show a top level link.
These top level links will not have a dropdown, and will show a right pointing chevron. The current-url property should be used in this instance so the component can specify if
the link is the current page.
<ba-header>
<ba-header-section heading="Discover" href="/discover" current-url></ba-header-section>
<ba-header-section heading="About" href="/about"></ba-header-section>
<ba-header-section heading="Contact" href="/contact"></ba-header-section>
</ba-header>
Styled navigation with the <ba-header-list> component
If a list of links is being added to the <ba-header-section> component it is best to use the <ba-header-list> sub component. This component takes a heading and a tags in its link slot.
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
heading (required) |
heading |
The sub heading of the nav section | string |
undefined |
<ba-header>
<ba-header-section heading="Discover">
<ba-header-list heading="BA">
<a slot="link" href="test 1" aria-current="page">BA</a>
<a slot="link" href="test 2">About BA</a>
<a slot="link" href="test 3">BA Better World</a>
<a slot="link" href="test 3">The BA Experience</a>
<a slot="link" href="test 3">Travel Classes</a>
<a slot="link" href="test 3">Whats New</a>
<a slot="link" href="test 3">Our Business</a>
<a slot="link" href="test 3">Partners and alliances</a>
</ba-header-list>
</ba-header-section>
</ba-header>
How to place on a page
To use the header with other components, it should be placed outside of any ba-page-segments and above the main tag
<ba-header></ba-header>
<main>
<ba-page-segment>
...
</ba-page-segment>
<ba-page-segment>
...
</ba-page-segment>
<ba-page-segment>
...
</ba-page-segment>
</main>