Masthead mobile - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki

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

Dependencies (2)

Used by (1)

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


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.

callout 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.

blocker 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
⚠️ **GitHub.com Fallback** ⚠️