Learn about the Tab & Tabs components: features, options, and common use.
After reading this article, you’ll know:
-
What the Tab components are, their features, and use cases
-
How to use the Tabs in your application
-
The difference between the Tab and Stepper components
What are the Tab components?
Tab is a navigation component that allows you to create separate containers to fill in with content. Each tab contains its content, making organizing pages within an application easier. This functionality allows users to switch between tabs to view different content without navigating to separate pages.
The two Tab variations are:
-
Tabs component is a full-sized base to fit in separate Tabs. It has a simple customizable menu bar that lets users switch between tabs.
-
Tab is a single child item within Tabs, you can add multiple Tabs to the parent Tabs component.
Example of use
There are multiple uses for Tabs, and while searching through the web and using different resources, you’ve probably seen many examples of their use. Let’s stop at the easy one - a reservation tool for the workspace.
Tabs ‘Week’ and ‘Day’ enable users of this tool to switch between the calendar views quickly.
Options
The options within the Tab(s) components include reconfiguring, tab-selecting, layout, alignment, styling, and others.
Reconfigure options allow you to add, delete, and change the order of Tabs in the Tab menu. While adding a new Tab, you can also select an icon and its alignment in the menu.
The selected Tab option enables you to choose the main tab to be displayed in both runtime applications (compiled page) and while designing in the Page builder. Tick the Show all tabs option to show the content space for all existing Tabs.
The rest of options include:
-
Layout, used to change the look of the Tab buttons from ‘Default’ to ‘Circle’
-
Alignment enables choosing the position of Tab buttons within the Tan bar
-
Variant has a couple of styling solutions:
-
Standard - classic Tab buttons aligned from left to right
-
Scrollable gives you extra options for cases with many tabs. You can select between showing scroll buttons automatically, in a desktop version, as well as keeping them always on the screen or never showing at all
-
Full width stretches all existing Tabs to the full size of the Tab bar
-
-
Besides these key options, you can also keep the Tab buttons centered in the menu, and hide visual tabs (menu) completely while you’re building
Styling enables you to customize the Tab bar height and width and color, text color and style, as well as the indicator color that signals which of the tabs is open.
The primary colors for your application can be selected via the Theme Builder.
Using the Tab components
While building your application, you’ll likely need to use Tab components at some point. Imagine you’re building a news portal and you want to fill it in with various content grouped by topics (e.g. ‘Sports’, ‘Politics’, ‘Weather’, etc.). This means, you’d have to use either separate pages or just tabs that the readers can switch between. Let’s prepare a piece of layout for such a use case using the Tabs.
Drop the Tabs component onto the prepared Column. Then we’ll add some more Tabs on top and press Show all tabs to read every single Tab and rename it.
Fill in each of the Tabs with Title and Text components (as an example). Make sure the components are placed directly into a desired Tab space. Besides that, you can use the Box component for more advanced alignment and positioning options for future content.
Add some content to the Title and Text components via the Content field in their options.
After you’ve filled in each of the Tabs, you can untick the Show all tabs option and compile the page to see how it looks in the runtime.
Tabs vs Steppers
Tab components look very similar to Steppers, especially if you change the Tabs' layout style to a Circle.
Even though the options of the Stepper and the Tabs are alike, one would rather use Stepper to enable users to fill in some forms step-by-step. Keep the Linear option on in the Stepper options so that your user can only reach the second step after completing the first one.
Finally, let’s compile this page to see how it functions in the runtime so that you can see this difference. On top, you can see the Stepper with the form you have to fill in before getting to Step 2, whereas at the bottom, there are some Tabs (with Circle layout enabled), and you can switch freely between them.
With its flexibility and ease of use, the Tab component can be viewed as a valuable asset in the toolkit of Betty Blocks builders, empowering businesses to build efficient workflows within one single page.
Curious about other options that allow building an application navigation? We recommend checking the Navigation on your pages article.