Masthead L0

Core UI component

The Masthead L0 component is a required navigational pattern for IBM.com that displays consistently at the top of each page. It also includes search and profile services for IBM.com.

---

Table of contents

• 1. Logo
• 2. Platform label
• 3. Navigation
• 4. Mobile navigation
• 5. Search
• 5.1 Clear CTA
• 5.2 Submit CTA
• 6. Account

Dependencies (5)

• Masthead navigation
• Search typeahead
• Masthead account
• Masthead mobile
• Carbon tooltip

Used by (1)

• Masthead

Back links (10)

Masthead account (1)

• r1: Masthead L0

Masthead mobile (1)

• r1: Masthead L0

Masthead navigation (1)

• r1: Masthead L0

Masthead (6)

• Masthead component brings the Masthead L0 and Masthead L1 together into a single...
• ...0.0.7 | Masthead L1 === false | Masthead L0 gets primarySticky state if Masthead L1 is...
• ...L1 gets primarySticky state if present. Masthead L0 gets secondarySticky state.
• 1.0.1 | L1 === true | Hide Masthead L0 navigation if Masthead L1...
• See Masthead L0 for more
• ...is present use those navigation items over Masthead L0 navigation items within the Masthead mobile....

Mega menu (1)

• ...is a component that is used in tandem with the Masthead L0

Resources

• r1: Box folder

---

1. Logo

required SVG

Logo CTA that displays the logo of the organization and allows the user to navigate back to the site’s homepage.

Modifiers

	name	description
1.0.0	default	The default IBM logo is used.
1.0.1	custom	A custom logo overrides default if provided by data/adopter.

Logic

	name	description
1.0.2	startDate	startDate determines when a custom logo, and tooltip should start displaying.
1.0.3	custom	endDate determines when a custom logo, and tooltip should be removed/hidden.
1.0.4	logo-divider	Only display divider if Navigation 3 is provided.

This allows for planning and releasing in advance.

Events

	name	description
1.0.5	onClick	Navigates back to the homepage.
1.0.6	hover	Displays tooltip if content is provided.

See Carbon tooltip for more details.

2. Platform label

optional CTA

Text CTA that displays the name of a platform and allows users to navigate to the platform’s landing page.

Events

	name	description
2.0.0	onClick	Navigates to the target URL.

Logic

	condition	description
2.0.1	Navigation === true	Only display if Navigation 3 is provided.
2.0.2	viewport width <= 800px	Platform name is hidden, moves to Masthead mobile

3. Navigation

optional component

Logic

	condition	description
3.0.0	true	Visible by default
3.0.1	false	Hidden if set to explicitly false
3.0.2	viewport width <= 800px	Navigation is hidden, moves to Masthead mobile

See Masthead navigation for more details.

4. Mobile navigation

optional component

Logic

	condition	description
4.0.0	true	Visible by default
4.0.1	false	Hidden if set to explicitly false
4.0.2	viewport width > 800px	Mobile navigation is hidden, use to Masthead navigation instead.

See Masthead mobile for more details.

5. Search

optional component

Logic

	condition	description
5.0.0	open = true	Visible by default.
5.0.1	open = false	Hidden if set to explicitly false
5.0.1	open = true && onLoad	Value is fixed and search can't be closed.

See Search typeahead for more details.

5.1 Clear CTA

Events

	name	description
5.1.1	click	Clear search value.

Logic

	condition	description
5.1.2	click && open = false	Search input is collapsed and hidden onClick.
5.1.3	click && open = true	Search input remains open and visible onClick.

5.2 Submit CTA

Modifiers

	name	value	description
5.0.2	cta	true	Fixes prop to include cta in masthead search.

Logic

	condition	description
#.#.#	click && open = false	Sets search open state to true.
#.#.#	click && open = true	Submits search query and navigates to search page if valid search query.

Example

6. Account

optional component

Logic

	condition	description
6.0.0	true	Visible by default
6.0.1	false	Hidden if set to explicitly false

See Masthead account for more details.