Masthead mobile

Core UI component

The masthead mobile menu should be used at smaller breakpoints, allowing for a better experience and accessibility for those on mobile devices.

---

Table of contents

• 1. Mobile toggle
• 2. Menu
  • 2.1 menu back button
  • 2.2 menu title
  • 2.3 menu item

Dependencies (2)

• Link with icon
• Carbon icons

Used by (1)

• Masthead L0

Back links (5)

Masthead L0 (3)

• ...<= 800px` | Platform name is hidden, moves to Masthead mobile
• ...width <= 800px` | Navigation is hidden, moves to Masthead mobile
• See Masthead mobile for more

Masthead L1 (1)

• ...800px` | Masthead L1 is hidden, moves under Masthead mobile

Masthead (1)

• ...over Masthead L0 navigation items within the Masthead mobile.

Resources

• r1: Masthead L0
• r2: Masthead L1

---

States

	name	description
0.1.1	Closed	Closed to hide menu items.	default
0.1.2	Open	Opens to reveal menu items.

1. Mobile toggle

Events

	name	description
1.0.1	click	Toggles open 0.1.2 and closed 0.1.1 state.

Logic

	condition	description
1.0.2	open/closed state	Icon transitions depending on the open 0.1.2 and closed 0.1.1 state.

See the design specs ^r1 for details

2. Menu

Logic

	condition	description
2.0.1	vertical overflow	Menu scrolls vertically if the content exceeds its height.

Events

	name	description
2.0.2	to child	Animates panels right to left revealing the child panel.
2.0.3	to parent	Animates panels left to right revealing the parent panel.

2.1 menu back button

Events

	name	description
2.1.1	click	Triggers to parent event 2.0.3

Logic

	condition	description
2.1.2	level 1	Hide element
2.1.3	level 2 <=	Display element

2.2 menu title

The menu title gets its content from its parent item.

2.3 menu item

The menu item can either be a direct link, or a menu item to a child panel.

States

	name	description
2.3.1	Selected	Indicates the user is on this, or a descendent of the page link.

Only one selected state per level. If more then one item is set to slected the first in the list wins out.

Modifiers

	name	description
2.3.2	active	Sets item to Selected 1.0.1 state. Autogenerated unless adopter explicitly overrides.

Logic

	condition	description
2.3.3	Descendant with selected state	If an item's descendent has a selected state, than this item adopts that selected state.

2.3.1 menu item link

Events

	name	description
2.3.1.1	click	Navigates to targetted URL.

2.3.2 menu item menu

Events

	name	description
2.3.2.1	click	Triggers to child event 2.0.2