Topic: Make Nav Tabs Scrollable

Jordan free asked 2 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 2 years ago


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

Thank you, @Marcin Luczak!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: 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