Side Navigation: Designs / Question & Answer

[tbaker1026]

Side Navigation component went live August 4, 2025

**Go to the Side Navigation component page to see designs, guidance and code.

---

Side Navigation Research for references
Posting proposed designs for IIR/AE teams near-term need for Profile navigation update. Also, posting designs to show how this side nav component design can flex to be used on Hub and Facilities pages:

Proposed designs side-by-side

Click images to open in new window or view in Figma.

[tbaker1026]

Yes. There was clarification around navigation layers:

• Example: Profile > Communication Settings > Paperless Delivery
  This level of depth is supported and expected.

[danbrady]

Just a quick note in case it’s helpful, this isn’t intended to be the breadcrumb for the page. There wouldn’t be a "Communications settings" link, since this is meant to function as a category, and categories won't have destination URLs. (At least for this IIR/AE initial request.)

That said, this category needs to support two links: "Notification settings" and "Paperless delivery."

[jfinnerty13]

Long term there may be situations where we do need a secondary page then the tertiary, so curious what happens if we ever do need the middle link to be clickable?

[tbaker1026]

@mnorthuis opening up an intake ticket with more details about IA

[mnorthuis]

I'm assuming this side nav conversation is just about the auth experience? It sounds like Profile wants a concept similar to the "spokes" in the unauth space (i.e. Get benefits) - a design element used to organize links in the nav, but not part of the hierarchical structure of the page. This can work, but there should be rules established in how its utilized.

[humancompanion-usds]

We're proposing 2 variations of the sidenav. One would be for the unauth, the other for the auth.

[jfinnerty13]

@humancompanion-usds so sorry, but that link goes to a 404 for me, is there a more up to date link? Thanks!

[tbaker1026]

@jfinnerty13 I moved the links (designs) Matthew was referring to as the first question in this thread, to keep the conversation in one thread only.

[danbrady]

Posting updated designs based on feedback from accessibility review and PO input.

Here’s what's updated in the sidenav:

• Added subtle dividers between links for better readability of long links
• All links always use the standard “link blue” color
• Active pages links:
  • Bolded label (maintains link color)
  • "Link blue" left border to indicated active page
• Category labels:
  • Smaller, all-caps text
  • "Light base" text color
• Links within the same category get a “light primary” border when any active page is within that section
• Use current VADS accordion for the mobile expand

Desktop - Contact Information

Mobile - Contact Information (Closed & Opened)

Desktop - Paperless Delivery

Mobile - Paperless Delivery (Closed & Opened)

[mcommons10]

@danbrady - we're headed to Midpoint Review next week for Paperless Delivery and we wanted to include the current iteration you have of the side nav. Should we use the ones in the thread above or is there a more up to date version we should use? cc: @raquelou

[danbrady]

Here are the latest designs for reference:

@raquelou If it’s easier for your designs, feel free to use the Figma assets directly from the branch we're developing in. That should give you flexibility to swap page names, adjust the active state, etc. That said, it’s looking like this will be merged into the main Component Library within the next week or so. Let me know if you run into any issues!

[raquelou]

Thank you! Yes I will use the Figma assets. Thanks for sharing the link!

[danbrady]

🎉 Sidenav v1 is on track to be merged this week!

As we begin thinking about the next release, @jfinnerty13 has shared a mockup proposing all the links that might be needed within the profile section. While the mockup currently uses Sidenav v1 for layout, it’s not meant to represent the final presentation.

Looking ahead, we’ll want to explore how the Sidenav can evolve to better support this kind of hierarchy in a more user-friendly, intuitive, and scalable way.

[jrfbz]

I'll find myself missing the ability to expand and collapse sections for our staff-facing application. Any chance that will be re-introduced?

[humancompanion-usds]

Yes. v1 was mainly to satisfy the needs of the Profile within My VA. We will be working on adding additional variations currently in use on VA.gov.

[tbaker1026]

@jrfbz Do you have any designs or screenshots you can share, so we can see your use cases?

[humancompanion-usds]

@jrfbz - You don't have to adopt this version until it has what you need.

[jfinnerty13]

Noting we are in progress of updating profile and the side navigation is getting very long. Wondering if there is a timeline for getting collapse/show options added into the left navigation? Not launch blocking but wanted to ask - thanks! @PatSiebenlist @alatempa

[laflannery]

The CMS team, with the next-build migration, was going to implement the side nav on the Benefits Pages however we would also need the ability to expand/collapse. The hierarchy here is wild and while there is a future initiative to move a lot of this content out which would help, for now I would consider the current display launch-blocking: (ignore the fact that there's no content, migration is in progress):

Depending on the timeline of this feature, we may end up adding the same custom nav currently on the pages and then the Public Websites team can add this component in future.

[andaleliz]

Small detail but I'm curious - did the team consider calling this "sub" or "secondary" navigation instead of "side"? Asking since we have more mobile visitors than desktop to VA.gov and there is no "side" on mobile.

[humancompanion-usds]

Nope, I did not consider renaming this component given that the nomenclature was determined long before I joined the VA. While a different name might be more correct, in the past when I've changed an entrenched name very few people adopt the new name. Case in point: List and loop. Next to no one calls it Ask users for multiple responses.

[mnorthuis]

FWIW, this is technically a secondary nav component, but it is also designed to be on the side of a desktop view. This is different than the secondary nav that MHV uses, which sits across the top of the page. So I think its fine to be more specific here. If future iterations drastically change the secondary nav (I have dreams), then we could consider naming it differently to differentiate the two.