Secondary Nav: refactor into new design

[anselmbradford]

Changes

• Change translations from "In this section" to "Navigate this section"
• Refactor secondary nav to latest designs (see screenshots).

How to test this PR

1. Visit some pages with a secondary navigation, such as

http://localhost:8000/data-research/small-business-lending/filing-instructions-guide/2024-guide/
http://localhost:8000/rules-policy/regulations/1002/
http://localhost:8000/paying-for-college/your-financial-path-to-graduation/
http://localhost:8000/enforcement/payments-harmed-consumers/
http://localhost:8000/es/herramientas-del-consumidor/prestamos-para-vehiculos/respuestas/conozca-sus-derechos/

Resize to mobile. These pages should have a new secondary nav appearance (see screenshots).

Screenshots

Before:

After:

[jenn-franklin]

Exciting! One small thing I'm seeing in the above screenshot is that there's a slash before the parent link "Strategy, Budget and Performance." On Beta—on a Coronavirus page for example—we don't include a slash before the first link of the path.

I'd say either approach is technically correct. I wasn't thinking we'd include the first slash but then again it does indicate that there's something (Home) beyond the breadcrumb showing, and I guess the chevron that's currently on cf.gov currently fills that same purpose. I glanced at what USWDS does, and they actually include a "Home" link in every breadcrumb. So, I'm honestly a little torn on if we should include it or not. The main thing I'm feeling is that there should be consistency in approach across pages.

[anselmbradford]

@chosak @willbarton Do you have guidance on what is happening with the breadcrumbs on pages that have the caret at the beginning? http://localhost:8000/es/coronavirus/maneje-sus-finanzas/ is another page with the leading slash (caret in the old design).

[chosak]

@anselmbradford in response to your question about the leading slash: in Jinja for syntax the loop.index variable is 1-based, not 0-based. So if the length of the breadcrumbs is 1, this will render the divider the first time through the loop. See docs here, you can use loop.index0 instead.

I'm a bit unclear from your comments above with @jenn-franklin -- what is the desired behavior? If you don't want to render the slash if there's only one parent breadcrumb, you could remove this clause, but will it be obvious that this is a breadcrumb then?

[jenn-franklin]

We didn't include the first slash during usability testing, and participants didn't struggle to understand that it was a breadcrumb, so that's good! But... ugh... I'm waffling. Haha. I guess ultimately I may lean a little more toward including the first slash.

[anselmbradford]

As is, http://localhost:8000/es/herramientas-del-consumidor/prestamos-para-vehiculos/respuestas/conozca-sus-derechos/ would not have a leading slash, while http://localhost:8000/es/coronavirus/maneje-sus-finanzas/ would. I guess we either always want the slash or always not have it?

[jenn-franklin]

Yah, I'd say always slash or never slash.

[anselmbradford]

Yah, I'd say always slash or never slash.

Which one though?

[chosak]

If it's helpful, Jinja has a random filter if we want to show slashes to some visitors but not others. Keep the cf.gov experience dynamic and interesting!

[jenn-franklin]

Let's go with slash!