Today I'm sharing with you a small snippet I've been working on this week. It's a smart responsive tabs concept. I initially found that idea on UIKit (but it's not working like that anymore). The idea is to collapse the tabs into one single dropdown if you don't have enough space.

Why is the needed ?

Well, can use media queries to deal with tabs on a mobile device (like in this pretty good idea) but it doesn't take into account the available space in the container.

As long as you only have a couple of tabs with short labels, that works alright, but as soon as you start to have a large number of tabs with variable labels (due to translation for example), things start to get complicated. And tabs can shift on multiple lines, and that's really ugly.

What's the solution ?

So the idea is to monitor the element containing the tabs and when there is not enough space to display all the tabs on one line, you collapse it down to a dropdown. Thanks to built-in components from Bootstrap, it's possible to do that easily.

When building this snippet, I've discovered the ResizeObserver that allows to monitor only one element, instead of hooking on the global window resize event. Hopefully this should make things a bit smoother and performant.

A demo please

Yes of course ! (use the zoom control to see how it works!)

UPDATE: This is now part of my BS Companion library