Uswds: [Side navigation] looking for guidance on multi-line nav titles

[mollieru]

Hello! Curious if anyone has encountered instances where side navigation titles require two lines of text? If so, any guidance or screenshots of how others have handled this?

Many thanks!

[joshbruce]

@mollieru - Luckily we were able to get them to be short enough not to have them wrap anymore.

Having said that, before we were able to - the default wrapping seemed to work fine. From a UX perspective - I try to keep menu items no longer than two to five words (and that's stretching it). In my experience I have not met a menu item that actually _needed_ to be longer than that.

If we are looking to modify behavior to reduce title links for menu items (the title of the page can be as long as it needs to be) - we could truncate and ellipse; the trade off there being that some users may not know exactly what they're clicking on.

[ericadeahl]

@mollieru Agreed that it's preferable to keep titles short, but in some cases the wrapping might be unavoidable. In those cases I wouldn't recommend truncating the title. I don't think the wrapping is a problem, I'd just make sure there's sufficient spacing between nav items (or another visual indicator like a rule) to make sure users read the long title as one nav item and not two. And I wouldn't go over two lines of text.

[bradnunnally]

Echoing what's already been mentioned. Something that has helped me in the
past when struggling with long nav titles is stopping and asking myself why
the title has to be so long. Sounds simple, but in the past its reminded me
that most of the time it's for bad reasons (It's always been called this
thing, or it's a phrases that the design team got stuck on and never
considered alternatives).

Erica brings up a good point though that anything that spans more than 3
lines should be rethought and shortened for sure! If the only label that
makes sense is more than two lines, maybe the content in that section needs
to be broken up into two different sections.

On Tue, Jun 7, 2016 at 1:27 PM, Erica Deahl [email protected]
wrote:

@mollieru https://github.com/mollieru Agreed that it's preferable to
keep titles short, but in some cases the wrapping might be unavoidable. In
those cases I wouldn't recommend truncating the title. I don't think the
wrapping is a problem, I'd just make sure there's sufficient spacing
between nav items (or another visual indicator like a rule) to make sure
users read the long title as one nav item and not two. And I wouldn't go
over two lines of text.

[image: screen shot 2016-06-07 at 11 19 13 am]
https://cloud.githubusercontent.com/assets/5911280/15869587/e79b8852-2ca1-11e6-9ca8-dd96c5cc16ea.png

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/18F/web-design-standards/issues/1238#issuecomment-224371007,
or mute the thread
https://github.com/notifications/unsubscribe/AL73GJltBfvx25rCm-A2zhyBSUSjG5Arks5qJbgngaJpZM4Iv_4a
.

Brad Nunnally

_Innovation Specialist_

_18F https://18f.gsa.gov/_

_|_

_GSA http://www.gsa.gov/portal/category/100000_

_618-407-6490 | brad.[email protected] brad.[email protected]_

[juliaelman]

@mollieru thanks for opening this issue! Going to close for now per @bradnunnally response.