Make Nav Tabs Scrollable

Topic: Make Nav Tabs Scrollable

Jordan free asked 4 years ago

Expected behavior Is there a recommended approach to making nav-bar tabs scrollable on smaller viewports that cannot fit all options on the x-axis?

Actual behavior The default behavior is to wrap the nav item.

Resources (screenshots, code snippets etc.) Desired functionality: Example on Youtube

Add comment

Marcin Luczak staff answered 4 years ago

1 0 Best answer

Please insert min. 20 characters.

Hi,

There is no such method for tabs to make them scrollable as this would require customization of the component for each individual project. You can however try to reproduce this kind of feature by yourself by combining Tabs functionality with a horizontal scroll of the Carousel plugin, like in my snippet I've prepared for you. https://mdbootstrap.com/snippets/standard/marcin-luczak/2709241

In this case, you would have to add custom styles in the places I've indicated in the code.

Please remember that this is custom functionality and it can be unstable.

Regards, Marcin

Jordan free commented 4 years ago

Thank you, @Marcin Luczak!

Add comment