SecondaryNav component

[flacoman91]

This breaks out secondary nav component work out of #560 for a more focused PR

Addresses: #557

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://cfpb.github.io/design-system-react/pr-previews/pr-581/
Built to branch gh-pages at 2026-05-15 23:09 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[natalia-fitzgerald]

@flacoman91
It looks like the component is getting cut off in the mobile viewports (tablet and phone).

[natalia-fitzgerald]

@flacoman91
Can we make the following content and content presentation update for consistency with other components:

Secondary navigation

The secondary navigation component provides a left-hand navigation menu that can be used for in-page or section navigation.

Source: https://cfpb.github.io/design-system/development/main-content-and-sidebars#left-hand-sidebar-layout

I noticed that these layout and grid components include "Usage" sections that don't follow the pattern of other DSR components. I'd like to consider how we can include this information without deviating from the top level presentation for each component. What would you think of moving it to appear after the component variants?

Hero

I missed this earlier when I was reviewing the hero, that we added a sentence to the Storybook page that also deviates from the standard template. The text reads: "This component supports illustration, photograph (overlay), and knockout variants only — not the DS jumbo or 50/50 patterns."

Can we move this text either to the bottom of the Storybook page OR just indicate it in the code view? And, can we change the wording to:

The Jumbo and 50/50 hero variants, included in the CFPB Design System, are not supported by this component.

• Also, can we change the headings for all of the heroes to "41 characters max for a one-line heading"? I show that this is 40 characters, including spaces so no need to shorten the word "characters" to "chars." I will also request this change at the DS level.

• And, change all of the variant names to sentence case: With illustration, With photograph, With knockout text

[natalia-fitzgerald]

@flacoman91
When I try to focus on the tablet and phone view the left and right focus dotted line is missing.

[natalia-fitzgerald]

@flacoman91
In the "All viewport" the parent text is not rendering with the 500 weight? I can see 500 in the code but my eyes are seeing 400 (Regular) weight. It also appears that the Source Sans typeface is not loading. In the "Single viewport" the 500 and typeface appear to render correctly.

Screenshots

Single viewport	All viewports

[natalia-fitzgerald]

@flacoman91

• For the navigation links, is it possible to have the links set so that clicking on them does not take the user to another page?

[flacoman91]

Font issues:

single vs "all viewports"

[natalia-fitzgerald]

@flacoman91
The "Single viewport" image, shown second here has the correct weight. The "All viewports", shown first, does not.

[flacoman91]

@flacoman91 The "Single viewport" image, shown second here has the correct weight. The "All viewports", shown first, does not.

Looks like there was an issue with the way the iframe loads it. the iframe loads an iframe and it was losing the font,

I updated it and it should look good now.

[natalia-fitzgerald]

@flacoman91 - I don't think this has been fixed yet?

@flacoman91 When I try to focus on the tablet and phone view the left and right focus dotted line is missing.

[flacoman91]

@flacoman91 - I don't think this has been fixed yet?

@flacoman91 When I try to focus on the tablet and phone view the left and right focus dotted line is missing.

I'm seeing this on my screen.