Masthead

UI component

The Masthead component brings the Masthead L0 and Masthead L1 together into a single component for adopters to easily leverage and use consistently.

---

Table of contents

• 1. Masthead L0
  • 1.1. Masthead mobile
• 2. Masthead L1

Dependencies (3)

• Masthead L0
• Masthead L1
• Translation

Used by (1)

• Dotcom shell

Back links (5)

Dotcom shell (2)

• Masthead for how to use
• See Masthead for more

Masthead navigation (1)

• ...navigation is an optional component of the Masthead component. If enabled, they allow users to more...

Translation (1)

• on things like the Masthead and

Universal banner (1)

• ...the only component allowed to show up above the Masthead, and should be used exclusively for global and...

Resources

• r1: Box folder

---

State

	name	description
0.0.1	static	Static means it's scrolling with the rest of the content on the page.
0.0.2	sticky	Sticky means it's fixated to the top of the page as the user is scrolling.
0.0.3	primarySticky	The primary element sticking to the page is always sticky and present no matter the scroll direction.
0.0.4	secondarySticky	The secondary sticky element that only scrolls into view pushing the primarySticky element down to make room as you scroll up.

Logic

	condition	description
0.0.5	Masthead top >= scrollTop	State becomes sticky.
0.0.6	Masthead top <= original position	State becomes static.
0.0.7	Masthead L1 === false	Masthead L0 gets primarySticky state if Masthead L1 is not present.
0.0.8	Masthead L1 === true	Masthead L1 gets primarySticky state if present. Masthead L0 gets secondarySticky state.
0.0.9	default	By default all data is provided by the Translation service.
0.0.10	custom	The adopter can choose to override and provide their own data.

In the future we might want to callout what happens when the Masthead does not contain the lowest level of navigation? (e.g. if table of contents is present that becomes the primarySticky state, and then L1 would get secondarySticky if present, or L0 would get it if not present.)

1. Masthead L0

required component

Logic

	condition	description
1.0.1	L1 === true	Hide Masthead L0 navigation if Masthead L1 2 is present.

See Masthead L0 for more details.

1.1. Masthead mobile

Logic

	condition	description
1.1.1	L1 navigation === true	If Masthead L1's 2 navigation is present use those navigation items over Masthead L0 navigation items within the Masthead mobile.

2. Masthead L1

optional component

See Masthead L1 for more details.