Navigation

Tabs

Switch between views like flipping through file folders at a desk, organizing content without clutter.

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

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

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>
PaginationDrawer