[css-flexbox][css-regions] Navigation links overflowing into a menu

[JoshTumath]

I have a use case that's not currently possible to achieve with CSS.

I've been working on a more modernised version of the BBC's website navigation bar. The original one pre-dates flexbox being widely supported by browsers, so it was never implemented using that.

Problem

The BBC navigation bar has all it's links in the 'menu drawer', which opens up when the user clicks the Menu button. To save users on large viewports from having to open the menu drawer, on load, a relatively complex script calculates how many links could fit inside the navigation bar, and moves them out of the ul element for the menu drawer, into the ul element for the navigation bar. If the user resizes the viewport, this is recalculated. See the image:

Because this is done using a script, there's a few problems:

• If JS is disabled or fails to execute, no links can be moved to the navigation bar (see image below).
• While the script works out how many links can fit inside the navigation bar, the user will see a flash where the navigation bar is mostly empty.
• The user experience is strange for screen reader users, because there's two lists to navigate.

What I would like to be able to do

I want to re-implement this menu so that no script is required to fit as many links as possible in the navigation bar and put the rest in the menu drawer (you'd probably still need a script for the menu toggle button). There would be only one ul list in the DOM -- the menu items would not get divided up between two lists in the navigation bar and the menu drawer.

The CSS Regions spec has an example for a very similar use case to this.

So I'd like to use flexbox to lay out the navigation links in the navigation bar. Then I'd use CSS Regions to have the navigation flow into the menu drawer. But, if the navigation links are in the menu drawer, I want them to be styled differently; laid out using CSS grids and having different hover and focus styles.

---

I was encouraged by @argyleink to post this use case after meeting him at the Mozilla View Source conference (thanks, Adam 😄).

[fantasai]

Thanks for the description of the use case; IIRC @astearns brought it up when discussing Regions before, but it's nice to have it tracked with a clear description like this. :)

Just so you know, though, the building blocks to getting to where you want declaratively are all very complicated, so this is going to take a long time to solve...

[tabatkins]

I just walked thru the needed mechanics in my head, and I don't think it can be done fully declaratively without just special-casing more or less this exact mechanism. Regions are definitely necessary, but I think it would need to be paired with a custom element running some JS, listening to region events to know whether the menu should be shown or not.