Masthead navigation
Core
UI component
Masthead navigation is an optional component of the Masthead component. If enabled, they allow users to more easily navigate to key areas of the site regardless of the page they are currently on.
Back links (3)
Masthead L0 (2)
- See Masthead navigation for more
- ...> 800px` | Mobile navigation is hidden, use to Masthead navigation instead.
Masthead L1 (1)
- See Masthead navigation for more
Data for the
The masthead navigation item can be 1 of three options depending on the data the adopter provides.
| name | description | |
|---|---|---|
1.0.1 |
Selected | Indicates the user is on this, or a descendent of page. |
Only one selected state per level. If more then one item is set to slected the first in the list wins out.
| name | description | |
|---|---|---|
1.0.2 |
active |
Sets item to Selected 1.0.1 state. Autogenerated unless adopter explicitly overrides. |
| name | description | |
|---|---|---|
1.0.3 |
tab |
onTab (moving right/forward), each nav item should get focus, and if it is partially/fully hidden it should be transitioned into view aligned right. |
1.0.4 |
tab && shift |
onTab+shift (moving left/back), same as before only aligned left. |
| condition | description | |
|---|---|---|
1.0.4 |
Descendant with selected state |
If an item's descendent has a selected state, than this item adopts that selected state. |
This option is used if you have a single link.
| name | description | |
|---|---|---|
1.1.1 |
click |
Navigates to target URL on click. |
The dropdown menu should be used when you have a list of links.
| name | description | ||
|---|---|---|---|
1.1.2 |
Closed | Icon is in default position, and is closed to hide menu items. | default |
1.1.3 |
Open | Icon rotates, and opens to reveal menu items. |
| name | description | |
|---|---|---|
1.1.4 |
click |
Sets state to open 1.1.3. |
1.1.5 |
blur |
Sets state to close 1.1.2. |
1.1.6 |
tab |
First item in menu gets focus state 1.2.1, and the menu traps focus until closed. |
The dropdown menu item is merely a link within a list of links that the user can act on.
| name | description | |
|---|---|---|
1.2.1.1 |
Selected | Indicates the user is on this page. |
| name | description | |
|---|---|---|
1.2.1.2 |
active |
Sets item to Selected 1.2.1.1 state. Autogenerated unless adopter explicitly overrides. |
| name | description | |
|---|---|---|
1.2.1.3 |
click |
Navigates to target URL on click. |
The megamenu should be used when you have a list of categories and their links.
| name | description | |
|---|---|---|
1.3.1 |
click |
Sets state to open. |
1.3.2 |
blur |
Sets state to close. |
This overflow helps when content becomes greater than what the design at that view can handle. It allows customers to continue to interact with the navigation items within a limited amount of space.
The navigation container has a contained width depending on the browser’s window size, and allows content to overflow.
| name | description | |
|---|---|---|
2.1.1 |
to next |
Transitions to the next section/panel/view of nav content on the right and focus the first item. |
2.1.2 |
to previous |
Transitions to previous section/panel/view of nav content on the left and focus the last item. |
2.1.3 |
swipe left |
Triggers to next event 2.1.1 |
2.1.4 |
swipe right |
Triggers to previous event 2.1.2 |
| condition | description | |
|---|---|---|
2.1.5 |
onload && selected descendant |
position active menu item into view left aligned as first item in panel, unless rules to the left column override |
2.1.6 |
last item partially hidden |
Align last item right if moving to next. |
2.1.7 |
first item partially hidden |
Align first item left if moving previous. |
The navigation content is the actual navigation items and dropdowns. There can potentially be any number of items and can overflow at various points depending on content length and browser size
| condition | description | |
|---|---|---|
2.2.1 |
Partial hidden item |
if there is a partially hidden item on either side treat that item as the first item of the next section/panel/view |
The overflow buttons allow a user to navigate through the hidden navigation content going from one panel/view to another.
| condition | description | |
|---|---|---|
2.3.1 |
2.1 < 2.2 |
Only display if nav container width 2.1 is less than the nav content width 2.2 |
2.3.2 |
tabindex = -1 |
Skip keyboard focus. These buttons shouldn't get focus and be accessible to keyboard users. |
| name | description | |
|---|---|---|
2.3.1.1 |
click |
Triggers to previous event 2.1.2 |
| condition | description | |
|---|---|---|
2.3.1.2 |
Overflow left |
Only displays if there are partial/fully hidden items to the left of the nav container. |
| name | description | |
|---|---|---|
2.3.2.1 |
click |
Triggers to next event 2.1.1 |
| condition | description | |
|---|---|---|
2.3.2.2 |
Overflow right |
Only displays if there are partial/fully hidden items to the right of the nav container |