# Bootstrap 5 smart responsive tabs

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](https://getuikit.com/) (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](https://gist.github.com/howbizarre/e9e5cc2aa301c1d3ed7f5bf5e82cb1bf)) 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](https://getbootstrap.com/docs/5.1/components/navs-tabs/#tabs) and when there is not enough space to display all the tabs on one line, you collapse it down to a [dropdown](https://getbootstrap.com/docs/5.1/components/dropdowns/). Thanks to built-in components from Bootstrap, it's possible to do that easily.

When building this snippet, I've discovered the [ResizeObserver](https://caniuse.com/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!)

%[https://codepen.io/lekoalabe/pen/OJOXvGv]

**UPDATE:** This is now part of my [BS Companion](https://bs-companion.vercel.app/bs-tabs.html) library