Either ba-logo or an <a> tag with an svg can be used for the logo.
- Either should be clickable and take people to the home page.
- The accessible name for the ba-logo component should be “British Airways Homepage” to communicate the destination of the link.
- The
<a>tag should contain “British Airways Homepage” as visually hidden text to communicate the destination of the link.
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:
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 |
|---|---|---|---|---|
helpHref |
help-href |
The link for the help and support page | "" | undefined |
'' |
loginHref |
login-href |
The link for the login page | string | undefined |
'' |
oneworldHref |
oneworld-href |
The link for the oneworld logo | string | undefined |
'' |
searchHref |
search-href |
The link for the search page | string | undefined |
'' |
theme |
theme |
Which theme to show the header in | "default" | "midnight-700" | undefined |
'default' |
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 logged in state in the header all of these attributes marked with + must be populated
Events
| Event | Description | Type |
|---|---|---|
ba-header-global-account-click |
Account link click event | CustomEvent<MouseEvent> |
ba-header-global-login-click |
Login link click event | CustomEvent<MouseEvent> |
ba-header-global-logout-click |
Logout link click event | CustomEvent<MouseEvent> |
ba-header-global-menu-close |
Mobile menu close event | CustomEvent<MouseEvent> |
ba-header-global-menu-open |
Mobile menu open event | CustomEvent<MouseEvent> |
ba-header-global-search-click |
Search link click event | CustomEvent<MouseEvent> |
ba-header-global-help-click |
Help link click event | CustomEvent<MouseEvent> |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
"logo" |
A logo to show in the header | <a>, <ba‑logo> |
"utility-bar" |
Links to show in the utility-bar | <a> |
| Unnamed slot | Elements will render in the body of the component | <ba‑header‑global> |
Usage
Adding a logo
ba-logo can be assigned to the "logo" slot to add a logo to the header
<ba-header-global>
<ba-logo slot="logo" name="British Airways Homepage"></ba-logo>
</ba-header-global>
Adding a custom logo
For a custom logo, use an <a> tag with an svg
<ba-header-global>
<a href="/">
<span class="ba-u-visually-hidden-text">British Airways Homepage</span>
<svg aria-hidden="true" viewbox="0 0 100 50"><rect width="150" height="50" style="fill: rgb(227, 227, 227);stroke-width:3;" /></svg>
</a>
</ba-header-global>
Adding helpful links to the utility bar
Links that could be helpful to a logged in user can be added to the utility bar
<ba-header-global>
<a href="#manage" slot="utility-bar">
<ba-icon size="16" name="manage-booking"></ba-icon> Manage my booking
</a>
<a href="#flightStatus" slot="utility-bar">
<ba-icon size="16" name="flight-status"></ba-icon> Flight status
</a>
</ba-header-global>
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-global 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-global>
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-global>
<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-global>
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-global>
<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-global>
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-global>
<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-global>
How to place on a page
To use the header with other components, it should be placed outside of any ba-page-segment components and above the main tag
<ba-header-global></ba-header-global>
<main>
<ba-page-segment>
...
</ba-page-segment>
<ba-page-segment>
...
</ba-page-segment>
<ba-page-segment>
...
</ba-page-segment>
</main>