Breadcrumbs

[cogniSyb]

Agile Requirement
As a business owner, I want to display the breadcrumb in a clear and appealing way to the user.

Business need
Redesign of breadcrumbs needs to be implemented. This block occurs pages below Trucks and Solutions.

A new block V2 Breadcrumbs need to be created, as the current block is used on some existing magazine pages that don’t include redesign styles. Adjusting the current block has no value as the breadcrumbs don’t appear in the redesigned magazine.

Acceptance criteria

• A content editor should be able to place the block on any page
• The content will be pulled from the URL, replacing dashes with spaces, and will be capitalised
  • Each item will link to a part of the URL
• The HTML needs to be accessible
  • The slash is not part of content
• The following states of links need to be created:
  • Regular
  • Hover
  • Focus (focus-visible only, red line as per other focus states)
  • Active
• Tablet will follow desktop as much as possible, making use of available space (see next point)
• When there’s too much content available for the viewport, some content will be hidden
  1. Homepage
  2. Current page
  3. Any page above the current’s page parent

Solution for progressively hiding content: https://codepen.io/KenanYusuf/pen/JKEjOR?editors=0100
We’re not reusing the example from Adobe, as it will mean an adjustment to the header.

Questions

• On mobile, "Back to home" is shown. In the Mack Core Design Kit this is not the case. Which is leading? -> design kit
• What would be our approach to very long titles? Example: https://www.macktrucks.com/magazine/articles/2023/august/desert-ready-mix-finds-success-with-help-from-mack-financial-services

NOTE: On roadchoice we introduced horizontal scrolling: https://www.roadchoice.com/blog/belts-matter-a-guide-to-ensuring-reliability-in-your-vehicle

[ZoeBeykirch]

@manuel-vara Is this part of the navigation?

[shirin27]

@cogniSyb @ZoeBeykirch since this is not part of te PDP or homepage, this should not be in scope for MVP, no?

[ZoeBeykirch]

No doesn't need to be part of MVP

[WendyKruger]

Redesign of breadcrumbs needs to be implemented.

Questions

• On mobile, "Back to home" is shown. In the Mack Core Design Kit this is not the case. Which is leading?

@cogniSyb Please follow the Code Design Kit

[WendyKruger]

@BeckyMedlin @DanielaPedrochevd I would like to bump this up as a #1 priority to be handled in the next sprint.

[girishdigrajkar]

Validated and able to get the correct results and hence, marking the ticket to done status: