Local nav and breadcrumbs create duplicate links to the homepage

[ndiego]

The local navigation, in conjunction with the breadcrumbs, creates duplicate links to the local site's homepage. This issue is exacerbated on the new Showcase site since "Showcase" will also become a top-level navigation item.

Perhaps the breadcrumbs could be pulled into the local nav? This might have downsides too.

cc @jasmussen @marko-srb

[marko-srb]

Yes, we need to sort this out. Ideally after the launch as a next important update.
CC: @fcoveram

Let me review it next week.

[ndiego]

Just wanted to note that my idea of putting the breadcrumbs in the local nav is a bad one. Here is a stress test of that idea in other areas of the site: 😅

[jasmussen]

I don't think it's a bad one. I think we have options:

1. We can show the breadcrumb bar only on some pages, not all.
2. We can have 2 "modes" for the secondary bar; full (two bars, 2nd bar for breadcrumbs) and compact, which we can toggle on for sections that, e.g. only have 2 levels ever.

Something we've already discussed, because your example above already will break on mobile and tablet, is to allow eliding. E.g. instead of the above, you'd only see the top level link, the parent, and the current page, the rest would be elided. So 3 items not counting the ... at most. So the above would be:

Developer Resources / ... / Partial and Miscellaneous Template Files / Comment Template

I still think that 1 and 2 are still worth looking at, e.g. for the showcase and probably many of the About pages, a compact singular 2nd toolbar is valid enough, whereas for most sites in the Learn category we absolutely need a full breadcrumb bar.

[ndiego]

@fcoveram just looping you in here on this one for your thoughts. We also received a similar comment (#10) in WordPress/wporg-showcase-2022#234.

[fcoveram]

I think the best approach is to keep the breadcrumb and the local navigation separately and show the former as per location need.

The component aims to indicate where you are on the site. Therefore, any other visual indicator that conveys the same info could be hidden due to its redundancy.

I took a look at the new IA and designs, and concluded the following.

First-level sections of global header.

Sections visible as links in the global header, like News and Showcase, can safely hide their name in the local nav as the “page you’re seeing” indicator appears as a blue border in the global header. And, as this prototype shared in the taxonomy discussion ticket, we can show it back once users scroll down. The active state of About WordPress is not visible in the global header because the page is inside a page group, and the site name is in the local nav because H1 has a different copy.

Then, this logic in Showcase would look like this.

Breadcrumb in index bulk

For the index bulk: Showcase, Themes, Patterns, and Plugins. Each page displays items where the content details page announces where you are on the cover image and the H1. I noticed that Showcase’s site details mockup now has a breadcrumb between the local nav and cover image. If we follow that logic, all details pages of this group must also show it, and the outcome becomes redundant.

The breadcrumb doesn't add more info than the local nav and the H1 text, so I think it’s safe to hide it. Here is a quick mockup.

Breadcrumb in documentation bulk

For the documentation bulk: Learn, Documentation, and Developers. Large pieces of content are displayed, and users likely jump betweek sibling and child pages. Then, it makes sense to show the breadcrumb to reinforce the site location.

However, in this case shared by @ndiego, articles post-type gather content related to one topic, and the navigation and location rely heavily on the sidebar index. Showing the page depth in the breadcrumb is redundant and does not add much value. In the image below, breadcrumb and sidebar are outlined in red. As you go deep, breadcrumb starts showing the same pages as in the sidebar.

[ndiego]

Thanks for this context @fcoveram. Given the above, what sections of Showcase v2 do you think should have the breadcrumbs?

My initial thought is only archives (i.e. https://wordpress.org/showcase-v2/archives/?tag%5B%5D=celebrities&tag%5B%5D=design)

[fcoveram]

I vote for hiding it on all pages.

We aimed to treat the archive page as a "result with filters applied" page. In that vein, the breadcrumb is confusing as it mixes filter criteria. If we need to reinforce the filters applied, we can explore a different solution and deliver it in a future integration.

What do you think @jasmussen @marko-srb ?

[jasmussen]

I think @pablohoneyhoney asked for its inclusion so it'd be good for his input.

I personally see the value in the breadcrumbs, and I think this iteration would be good to have as an optionally compact version of the nav bar. I could see it useful not just on Showcase, but on News, and About pages, perhaps even Download where we also have Nightlies, Counter, etc. — this is a version of the bar that should only ever be used on sections that have less than N levels, so it should be an editorial decision on whether to use the unified or stacked version of the bar.

[marko-srb]

My thought: I suggest this happens as a separate exercise by @WordPress/meta-design after the launch and gets solved for across the site + guide/logic approach is clearly present in where we hide it, where we keep it.

[ryelle]

@ndiego @WordPress/meta-design A new nav design was posted in #535, should that supersede this discussion? It also includes ideas for the breadcrumbs/home links.

[fcoveram]

I'd say yes. #535 addresses the points shared here.