vf-navigation isn't responsive

[khawkins98]

The vf-navigation--main (and similar) don't respond to the viewport size, causing screen smaller than the nav width to horizontal scroll.

Visible on:

• https://visual-framework.github.io/vf-core/components/detail/vf-navigation--main.html
• https://wwwdev.embl.org/groups/communications/

This is partly solvable by:

.vf-navigation--main .vf-navigation__list {
    flex-wrap: wrap;
}

But then the component needs some space massaging.

It's the start of a wider thread about how to handle nav on mobile, but if the navigation can "gracefully" stack we can defer a conversation on burgers and tacos.

Priority set to high as we're getting close to launching some of these sites with the vf-wp--group-site theme.

[auto-comment[bot]]

Thank you for raising an issue. We will try and get back to you as soon as possible. Please make sure you have given us as much context as possible.

[sturobson]

We never got around to formalising what would happen on mobile (small viewports) with navigation - I recall it being discussed - I think the move to the new design exploration layouts removed some of the original CSS I had in place to 'make up' for the lack of design in older versions.

I'll dig it out and see what we can do.

(that's a lot of navigation)

[sturobson]

I think that this would be a better experience?

https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu

rather than - taking up all that whitespace with a blocked list or throwing it behind a 'hamburger' menu.

[khawkins98]

+1 for trying the horiz scrolling for the site nav; good for a few reasons in my view:

• as you point out: doesn't eat up all of the screen
• simplifies questions around spacing when stacked
• encourages content owners to minimise number of links as the "extra" go off-screen

It might raise questions/concerns, but I feel like it's a more sustainable path. I've also seen some other implementations that "hint" that you can side scroll -- but we can look into those if/when we need to, especially as that would need JS.

[sturobson]

It might raise questions/concerns

One concern I have for things like this is – "do you need that much top level navigation?"

[khawkins98]

They don't need it, but it has to be there. :/

[sturobson]

for example - is home not better placed as making "EMBL Communications" linkable to the 'home'?

on mobile it might be confusing too - is that home to the top level or home to the embl comms level

[khawkins98]

is home not better placed as making "EMBL Communications" linkable to the 'home'?

Yeah, good point. I can't recall why Mark advocated for "home" there. Perhaps the nav structure has changed in the interim.

[sturobson]

I think this one can be closed?

[khawkins98]

Should we prioritise a "priority" nav like https://gijsroge.github.io/priority-nav.js/

Also similar to what we did for EBI, and the community was happy with it http://www.ebi.ac.uk/style-lab/websites/patterns/menu-local-nav.html

Or have we done enough for now and make a new backlog issue?

[sturobson]

I think we can close this one and make a new backlog issue as suggested

[sturobson]

I'm closing this as we now use vf-cluster to help with the layout of --main which this issue was mainly about.

@khawkins98 feel free to re-open - or start a fresh issue if there's some loose threads here that warrant further discussion.

[khawkins98]

We might want to re-open this one. In any case, copying a conversation with @sturobson from Slack so it isn't lost.

currently things like navigation flow (using the vf-cluster):

but what about something like this, so this only happens if the viewport is narrower than the content:

I sometimes think we could do similar for our news summaries and cards, in certain contexts. But that's a wide discussion

With one overarching ‘simple’ layout component (like we’ve done with stack and cluster) we should be able to ‘just’ drop it in as needed.

Although - for the navigation — I don’t think we want to show the ‘scrolling’ on larger screens where we have stupidly long navigation so perhaps we’d also need to introduce ‘breakpoint overrides’ <div class="vf-component | vf-reel vf-cluster--md">…</div>