Side Navigation: Designs / Question & Answer

[tbaker1026]

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?