The idea is to use
flex to display the individual elements. At small breakpoints, the
100%, meaning each item stretches to the full width of the container.
At medium breakpoints the
flex-basis reverts to the initial value (
auto), meaning they bunch up as blocks, much like they would if you floated them.
If you then set a fixed
height and hide the
overflow content, you effectively hide the items that don’t fit on the top row.
overflow can then be toggled with a visually hidden checkbox and an accompanying
<label> element (this is known as the “checkbox hack”) that provides the functionality of a button.
There’s a couple of caveats with this:
1. It’s not accessible.
This is probably the primary reason for not using it. We have hidden the checkbox and the label, because for screen reader users, they’re not useful. I sincerely hope the navigation list is still useful to people with visual impairments. I’ve experimented with
focus-visible to ensure all elements in the list are visible, but it is still quite jarring.
2. You can’t automatically hide the “more” button
Without manually showing and hiding the toggle for the other items in the list, it will always show regardless of whether there are more items in the list or they are all on the page.
3. It’s not easy to style the “dropdown”
Since this is an overflow area, it’s not even part of a pseudo element. So changing the background only in the overflow area is not possible. And since we cannot know the height the overflow is going to be, we cannot easily make a pseudo element to fit that area.
An interesting experiment
As I said before, probably don’t use this in production. There’s probably a very small edge case where it would be more useful than a nav that collapses at a certain breakpoint.
All in all, I still love the combination of CSS hacks that lets us do this sort of thing. It’s what makes CSS such fun.