Tabs

Group related information under separate headings within the same page to better organize your pages

What are Tabs

Tabs in Noloco function as an integral part of user interface design, allowing for the organization of content in a compact, space-efficient manner. By using Tabs, you can group related information under separate headings within the same page. This not only streamlines the user experience by reducing the need to navigate between pages but also makes the application interfaces more intuitive and accessible.

Why You Should Use Tabs

Tabs offer several benefits in application design:

• Improved Navigation: Users can easily switch between different sections of content without leaving the page, making navigation seamless.

• Enhanced User Experience: By organizing information logically and clearly, Tabs help in reducing information overload, thus improving the overall user experience.

• Space Efficiency: Tabs make better use of screen real estate, allowing for the display of more information in an organized manner without overwhelming the user.

• Visibility Controls: easily show or hide tabs based on visibility rules, such as role or data conditions

Adding Tabs to Record Pages

1. Access the Page Editor: With build mode enabled navigate to the record page where you wish to add Tabs.

2. Add a new tab: From the options menu in the right sidebar, add a new tab using the + button in the Tabs

3. Customize your Tab: Add titles for each tab by opening the tab editor, or drag the tab item to rearrange the order of your tabs

Adding Tabs to Blank Pages

• Access the Blank Page Editor: With build mode enabled navigate to the blank page where you wish to add Tabs.

• Add a new tab: From the options menu in the right sidebar, add a new tab using the + button in the Tabs section.

• Customize your Tab: Add titles for each tab by opening the tab editor, or drag the tab item to rearrange the order of your tabs

Hiding a Tab with Visibility Rules

Tabs can be dynamically shown or hidden based on certain conditions. Learn more about Visibility Settings

1. Open the Tab: With build mode enabled, In the right sidebar editor, click on the tab you wish to apply visibility rules to.

2. Open the visibility settings tab

3. Define Visibility Rules: In the properties panel, find the visibility section and set the conditions under which the tab should be hidden or shown. These conditions can be based on user roles, data fields, or other criteria.

Moving a Component to Another Tab

1. Access Tabbed Content: Open the page containing the Tabs in the page editor.

2. Select the Component: Click on the component you wish to move.

3. Move to Another Tab: Using the component toolbar, above the selected component, click the "Change tab" icon and choose the new tab from the list