Topic: Make Nav Tabs Scrollable

Jordan free asked 3 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

Marcin Luczak staff answered 3 years ago


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.

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 3 years ago

Thank you, @Marcin Luczak!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes