Save 15% on all Justd Blocks
Components

Tabs

A component that organizes content into separate panels, allowing users to switch between sections without reloading the page.

Basic

Tabs divide content into sections, allowing users to easily switch between them.

Browse through a wide selection of recipes for all occasions and dietary preferences.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

With Icons

If you want to include icons in your tabs, it's simple to do. This tab setup handles icons smoothly, maintaining a clean design.

Find a variety of workout plans tailored to your fitness level and goals.

Orientation

You can set the orientation of the tabs to either horizontal or vertical.

Enroll in courses and access learning materials on various subjects.

Collections

Tabs can also be used within collections.

This is the overview tab content.

If you want to use tabs as navigational links, you can add the href prop to the Tab component. This will automatically change the cursor to a pointer.

Disabled

You can disable all tabs by setting the isDisabled prop to true.

Welcome to our service! Here, you’ll find a brief overview of what we offer, our mission, and how we strive to provide value to our customers.

You can also disable individual tabs by setting the isDisabled prop for each one, like this:

<Tab isDisabled id="c">Contact</Tab>
<Tab isDisabled id="a">About Us</Tab>
Previous
Pagination
Next
Dialog