Tabs
Group related information under separate headings within the same page to better organize your pages
Last updated
Group related information under separate headings within the same page to better organize your pages
Last updated
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.
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
Access the Page Editor: With build mode enabled navigate to the record 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
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
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
Tabs can be dynamically shown or hidden based on certain conditions. Learn more about Visibility Settings
Open the Tab: With build mode enabled, In the right sidebar editor, click on the tab you wish to apply visibility rules to.
Open the visibility settings tab
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.
Access Tabbed Content: Open the page containing the Tabs in the page editor.
Select the Component: Click on the component you wish to move.
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