✨ Develop the Breadcrumbs Component with Final Node Customization

[bettybondoc]

cc @wicksipedia @isaaclombardssw @UlyssesMaclaren @adamcogan @miichaelsmedley @louisroa8189

Description:
Create the Breadcrumbs component for Consulting Pages to display a clear navigation hierarchy. The component should use the page title as the default final node, which should not be clickable. Customization options should allow users to edit the final node for SEO or usability purposes, with the ability to reset to the default.

Acceptance Criteria

• The Breadcrumbs component includes the following default functionality:

• Displays the page hierarchy as breadcrumb links.
• The final node:
  • Uses the page title by default.
  • Is not clickable.
• Customization options:
  • Edit the final node text (useful when the page title is too wordy for SEO or clarity).
  • Reset the final node to its default value (page title).

• Fully responsive across desktop, tablet, and mobile
• Works seamlessly on all major browsers (Chrome, Firefox, Safari, Edge)
• Fields and customization options can be enabled or disabled for flexibility
• Code is ready for theming (e.g., Light/Dark modes, custom colors – see linked PBI: ✨ Introduce Light/Dark Mode with User Control and Auto-Detect #3300)
• Tested and approved by Wicksy, Louis, and Betty

Tasks

• Discuss with Wicksy and Betty best way to handle breadcrumbs (do we make it required for all pages?)
• TODO - Developer to update

Figure: Breadcrumbs

[isaaclombardssw]

This is pretty close to done, waiting for Caleb to do some of the harder parts as he would rather we go through it together (conditional collection displayed on /consulting).

Working on the simple parts of #3316 (ex. schema) in the meantime.

[Calinator444]

I've implemented the design and had it test passed by Betty and Louis, but unfortunately I needed to fix some bugs related to the traffic splitting for the new and old consulting pages so this won't be ready before for sprint review.

Also the linter is flagging "dark" as a non-tailwind class despite it being one https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

[Calinator444]

Also, I'll need to move the padding on the breadcrumbs into the component itself rather than the page layout. There are blocks that span the full width of the container that we need to accommodate for.

[Calinator444]

I haven't requested a test please yet because the playwright test for broken images was failing. The reason it's failing is because not all of the consulting pages are being generated with the new route splitting method. I found this out because I could see that next JS was failing to pre-fetch the data for the routes on the consulting index page.

The reason the pages aren't being generated is that Tina's graphql client only returns the first 50 results for a particular query (unless overridden) and we have 94 consulting pages. I've fixed this issue and am currently unsure why the consulting pages still aren't being generated.

[Calinator444]

Done - You can use this component on the new consulting pages now