Style breadcrumbs

[noahmanger]

Usability testing revealed the breadcrumb pattern clearly works. Users noticed them, they understood where it put them in the information hierarchy of the site, and they knew how to use them to navigate up the hierarchy.

Here is example of the logic of the breadcrumbs:

Note: We will not show siblings, and we need a way to visually distinguish non-link parent category titles from parent pages that are links.

Once the designs are complete, we will implement in fecgov/openFEC-web-app#1154

[jenniferthibault]

I'm proposing a more simple solution than you've outlined above @noahmanger — based on if it can be clicked or not instead of revealing so much about our structure. This might be unpopular 😁 but here goes:

The system is:

• If you can click it (if it's a page or a linked parent category) then it's $inverse (white) and underlined.
• If you can't click it (if it's a category or the current page you're on) then it's $gray and not underlined.

These combos do pass requirements for 508 color contrast ratios :)

A thing we probably want to think about and I've included above, is truncating very long page names

One change I'd consider making if we feel it's necessary is making the current page a bit more visually distinct in a subtle way. Mocked up below to demonstrate, but I do prefer the simplicity above^

cc @emileighoutlaw

[noahmanger]

I meant to respond earlier:

This looks great. I love the simpler approach. I think it might be good to make the current page bold, though. Or at maybe white? What do you think?

And +1 to truncating long names. That's easy and a good idea.

Just gimme the word and I can move this to implementation.

[jenniferthibault]

Bold / Grey
(This feels too easy to ignore)

Italic / White
(This feels right but I don't think Karla performs well as Italic, so I'd prefer another approach if we can)

White / Bold
(This feels good to me, but I'm worried it could come off too strong in the header space, which is already busy. Let's lead with this, and downgrade it to the regular italic weight if it feels like too much in context)

If you agree, @noahmanger , feel free to take it from here!

[emileighoutlaw]

I've been following this quietly, but I did want to make sure that I explicitly said I am 👍 with truncating the text

[noahmanger]

Per this morning, going with simply showing the current page as white, but not bold. Moved to implementation.