Creating Scrollable Horizontal Tabs in Chakra UI: A Quick Fix for Responsive Design

#webdev #react #nextjs #ui

When working with Chakra UI, you may have noticed that by default, tabs are not horizontally scrollable. This can pose a challenge, especially when dealing with a high number of tabs, potentially disrupting your responsive designs.

There's a straightforward solution to this problem that I discovered that involves a little Chakra UI styling. By wrapping the TabList component in a Box and applying some styles, you can easily achieve horizontally scrollable tabs.

<Box overflow="auto" maxWidth="inherit">
        <TabList w={[`max-content`, `100%`, `100%`]}>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
          <Tab>Lorem ipsum</Tab>
        </TabList>
</Box>

Screenshot Results (mobile view):

Let's break down what's happening here:

Component: This is a versatile container component in Chakra UI. We're using it to wrap our TabList. The overflow property is set to auto for responsive behavior. It means that if the content overflows the box, it will be scrollable.

overflow Property: This controls what happens when content overflows the box. In this case, it's set to auto, allowing the content to be scrollable.

maxWidth Property: We're setting the maxWidth to "inherit", ensuring that the box takes the maximum width available.

Component: This is the component responsible for rendering the list of tabs.

w Property: This is the width property. We're setting it to different values based on screen size using Chakra UI's responsive array.

Implementing this code will give you the desired effect of horizontally scrollable tabs, making it much easier to manage a large number of tabs on your website.

Give it a try and see how it elevates your design and user interaction!

Author
Tashyn Wallace