Breadcrumbs

[straight-shoota]

This is my proposal for site navigation.
Breadcrumbs indicate the current location in the navigation tree. They also provide navigation options to traverse up, and down.

Team page with bread crumbs:

Community page with bread crumbs and navigation links to other pages in that section:

[netlify]

✅ Deploy Preview for crystal-website ready!

Name	Link
🔨 Latest commit	c9cb3ac
🔍 Latest deploy log	https://app.netlify.com/sites/crystal-website/deploys/65a542deb68e3a000843d7be
😎 Deploy Preview	https://deploy-preview-529--crystal-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[beta-ziliani]

I'm not convinced for two reasons: it takes a significant portion of the vertical space, and I don't think the header adds much (and is kinda confusing to have Home / Community in Sponsors, when you conceptually have also Home / Sponsors). Let's discuss this with the design team.

[straight-shoota]

it takes a significant portion of the vertical space

I beg to differ on that statement. The height of the bread crumb line alone (which is the only thing visible on most pages) is anywhere between 25px and 35px depending on the viewport size. That's a third of the top nav bar and IMO pretty negligible. And I think there could even be some slack to reduce the whitespace above the page title on smaller viewports if we need to maximum vertical content space.

On section main pages there's an additional line with links to sub pages. That adds additional ~10px. But the thing is: We need to enable this navigation flow in some way. So if not so, then it needs some other element. I think this solution uses very little extra space, is quite elegantly usable on any device.

Either way, the vertical distance from the top of the viewport to the start of the first content item is reduced significantly from the current version of the website. And I don't think that vertical space is wasted too much on that. It can easily be reduced and still be aesthetically pleasing while being more functional, but it's not excessively disturbing. So in any case we're already improving a lot on vertical distance from the current baseline.

If we want to further reduce vertical space we yould perhaps consider an integration between bread crumbs and the top nav bar. Rough idea could look like this:

This would be more akin to the top nav bar in the current version of the website. For comparison:

More on this in #548

[straight-shoota]

Superseded by #548.