Breadcrumbs should use the page's H1

[RLHecht]

Description

In VA.gov, content guidance has been updated such that the final breadcrumb should match the H1.

Current breadcrumb behavior

For any page without left sidebar, the breadcrumb uses H1 (we think - there may be exceptions?). For any page with a sidebar, the breadcrumb is built based on the menu item, per https://prod.cms.va.gov/admin/structure/cm_document/note/126/breadcrumbs:

• Easy Breadcrumb does the handling for nodes with no menu. It has all the settings for breadcrumb generation at the link provided. Because the primary vehicle for populating breadcrumbs, the menu_breadcrumbs module, is not configured for all content types the easy_breadcrumb module has been added. The easy_breadcrumb module fills in the gap left by menu_breadcrumbs by populating breadcrumbs based on path for content types without breadcrumb data.
• Computed Breadcrumb is the other module we added. It doesn't have any configurable settings, but it takes the breadcrumbs generated for any node (whether easy breadcrumb or menu-managed) and shoves them into a hidden field. That field data is what shows up in JSON:API

Desired behavior

We should be consistent with the standard breadcrumb component in the design system, which states:

Each breadcrumb segment should match the H1 of the corresponding page. When writing H1s for a page, follow the content styleguide for writing page titles.

Example

Example Benefit Detail Page that demonstrates the Left Sidebar effect: e.g. https://www.va.gov/health-care/how-to-apply/

• Left nav item = Family health benefits
• H1 = Health care for spouses, dependents, and family caregivers
• Breadcrumb = Family health benefits <== this should be updated to use the h1 instead

Change management / Stakeholder team notes:

• Requesting team = Sitewide CAIA (IA)
• CAIA's OCTODE product owner = Mikki Northuis
• Time constraints / launch deadlines: CAIA is implementing some IA updates that are blocked until this gets changed.
• Other affected teams = Public Websites, Facilities (own FE templates)
  • This will need change management with contributing Drupal teams. These teams will need to confirm expected behavior for all their CMS-driven FE products after any breadcrumb configuration change in the CMS, tbd.

Acceptance Criteria

• [ ] Stakeholder teams have signed off on the change
• [ ] Page-level/last crumb Breadcrumbs on left-nav pages should match the page's H1
• [ ] Page-level/last crumb Breadcrumbs on no left-nav pages should match the page's H1

[FranECross]

Slack message to Randi H asking her if she has any concerns to this being targeted for Sprint 101 starting on 1/03... and she's answered that Sprint 101 is fine.

[jilladams]

Transferred to CMS repo.

[jilladams]

@RLHecht just to be clear: are you talking here about breadcrumbs within the Drupal UI itself, or breadcrumbs on VA.gov for pages that originate from Drupal? I assume the latter, but let us know if that's wrong.

[RLHecht]

Thanks for checking @jilladams It's the breadcrumbs on VA.gov. Right now they match what we put as a menu item to show in the left nav rather than the exact H1/page title, but it should be the opposite.

[randimays]

@FranECross @jilladams I'm not certain there is any front end work needed here. For (probably most, if not all) benefit detail pages, we retrieve breadcrumb data from Drupal and render it using a shared breadcrumb template and a shared page template. We should be able to make Drupal updates and solve the problem unless there are some nuances in the code I'm not seeing.

[FranECross]

Thank you, @jilladams for moving the ticket to To Do... and thanks, @randimays for the comments about drupal/front end. I've removed the VA.gov frontend label and added the Drupal engineering label.

[jilladams]

Ahhh, this is a change for bigger picture breadcrumb strategy. I didn't catch that before.

Right now, for any page with a sidebar, the breadcrumb is built based on the menu item, per https://prod.cms.va.gov/admin/structure/cm_document/note/126/breadcrumbs:

• Easy Breadcrumb does the handling for nodes with no menu. It has all the settings for breadcrumb generation at the link provided. Because the primary vehicle for populating breadcrumbs, the menu_breadcrumbs module, is not configured for all content types the easy_breadcrumb module has been added. The easy_breadcrumb module fills in the gap left by menu_breadcrumbs by populating breadcrumbs based on path for content types without breadcrumb data.
• Computed Breadcrumb is the other module we added. It doesn't have any configurable settings, but it takes the breadcrumbs generated for any node (whether easy breadcrumb or menu-managed) and shoves them into a hidden field. That field data is what shows up in JSON:API

So this isn't going to be limited to the Benefits page(s).

I think it's true that path = H1. For non-menu pages, path (aka H1) also = breadcrumb, based on the Easy Breadcrumb note above. So maybe we should be considering a blanket change that breadcrumb is always derived from path (H1), whether there's a menu or not?

That will likely need CMS / AP team review on the plan. (cc @dsasser @Becapa for our team; @laflannery & @timcosgrove bc breadcrumbs )

[randimays]

@jilladams I want to clarify that we're only talking about pages that are exclusively built by Drupal. Any pages that also use vets-website for page content are going to be trickier to straighten out.

[jilladams]

Fair but I do think the question above stands.

[RLHecht]

I also just want to mention that we want the H1 and the breadcrumbs to always match but we sometimes we change the left nav content to make it shorter. Right now we're able to edit this in the menu section in Drupal, and we would want to make sure that's still the case.

[jilladams]

Discussed with Dave today. For now: he'd like us to connect with Accelerated Publishing to understand if the bigger picture change for menu-based pages can be applied via AP, based on their previous work.

Next step: @FranECross to connect with AP team.

[FranECross]

Slack message to Tim/Tanner regarding this https://dsva.slack.com/archives/C52CL1PKQ/p1704929728099929 cc @jilladams

[jilladams]

From Tanner:

if i am understanding the ticket+ Randi H's comments in it correctly, the ask is that the breadcrumb should match the h1 of a page. the menu and h1 should continue to stay as they are (potentially different text).

i think Randi M and Tim are right, in that the CMS should be providing the desired breadcrumbs for a given content type. the work could technically be done at the AP / FE layer, but would be better handled by Drupal, imo. if it is a pressing change, it will need to be done in the CMS or in content-build FE.

We will need to revisit with @davidconlon if our team should spearhead the broader breadcrumb updates from within CMS, or work with Erika & Co to hand this off.

[jilladams]

@FranECross this one is feeling stuck. I think after Tanner's notes, we need to reconvene re: whether we do portions of this or push it to CMS team. I feel like we had a breakthrough with Dave about it, but I've now lost track of what it was. 😬 Please lemme know if you have clarity. Unclear if this is actually ready to be in a sprint for implementation or not.

[FranECross]

@jilladams (if I remember correctly) Dave was in favor of handing it off for the broader scope to be done by the CMS team.

[jilladams]

From planning: Dave confirmed, check with Erika re: move to CMS team backlog.

[jilladams]

Hiya @EWashb . This ticket represents feedback from CAIA that on content pages with or without a left menu, it's preferred that the breadcrumb match the H1. Right now Drupal powers the breadcrumb on Drupal pages, and for pages with a left menu, the breadcrumb matches the left nav item. (This ticket started as specific to Benefit Detail Pages, but breadcrumb logic for left nav pages applies to more templates.)

We checked with AP based on their recent breadcrumb work, and Tanner flagged (in comment above) that ideally the CMS would own updating Drupal breadcrumb logic, and then it can be applied in the FE (either in content-build, or AP, depending on the tolerance for AP prod timing on all the affected templates).

Do you agree, the bigger picture Drupal/breadcrumb logic belongs with the CMS team? If so, we can get y'all a ticket for CMS backlog -- whether updating this one to be bigger picture and move it over with the comment context, or write up a new ticket, either way. cc @maortiz-27-80 & @davidconlon fysa

[EWashb]

Hi @jilladams. I don't disagree with you, but I want to make sure to set appropriate expectations with everyone- I'm unsure of when this particular work will be able to be prioritized against other things currently in the CMS backlog. We are very short on capacity and also undergoing a transition period with the new CMS team. If you would like to create a ticket and assign to the CMS Team for refinement, that is fine, but I am quite unsure of when this could be taken care of. If the Public Websites team has capacity for this and priority is high, the CMS team could act as code reviewers for the work, but I cannot commit that we can get this done this quarter.

[jilladams]

Will check with Dave on that. Thank you much!

[jilladams]

Discussed with Dave: this can wait until after CMS Team contract transition. @RLHecht if you have concerns about that, Dave requested you chat with him / Erika about it.

[jilladams]

Updated ticket body here to reflect that the ask is bigger than just Benefit Detail Pages, for the incoming CMS Team's sake. @RLHecht please feel free to modify anything in the updated description as needed.

[EWashb]

@gracekretschmer-metrostar could we possibly get this into Q2 for some technical discovery on the level of lift this change would require?

[mnorthuis]

@jilladams @EWashb dusting off this issue, is this something that PW can pick up, or has it already been placed on CMS backlog?

[jilladams]

This is in CMS backlog. cc @gracekretschmer-metrostar

[randimays]

This may be partially or fully complete due to the breadcrumbs work DST has done (to upgrade to the web component for Drupal pages).

The example from this ticket (https://www.va.gov/health-care/how-to-apply/) has its last breadcrumb matching the h1. I also spot-checked a handful of other benefit detail pages and they are working as well. There is still work in progress by DST to update the rest of the breadcrumbs in content-build to the web component. Those changes are largely for form/apply flows on the authenticated side.