Noloco
Ask the CommunityHire an ExpertLoginSign up
  • Noloco Overview
  • 🚀Quickstart
    • Start with your data
    • Start with AI
    • Start with a template
  • Data to App
    • Database Consolidation
  • App Settings
  • Components
    • Containers
    • Video
  • Templates
  • 🔗Data Sources
    • Data Overview
      • Setting a Collection's Primary Field
      • Syncing
    • Noloco Tables
      • Field Types
      • Relationships
      • Automatic Links
      • Rollup Fields
      • Lookup Fields
      • Formulas
      • Noloco AI
      • Import a file
    • Airtable
    • Google Sheets
    • SmartSuite
    • MySQL
    • PostgreSQL
    • REST APIs
    • HubSpot
    • Xano
  • 📄Pages
    • Collection views
      • Show collection record count
      • Empty State
    • Blank pages
    • iFrame embeds
    • External links
    • The Home Page
    • User Profile Page
    • Parent pages & folders
    • Page visibility rules
    • Cloning pages
    • Renaming pages
    • Hiding pages
    • Sidebar dividers
    • Tabs
  • 📂Collections
    • Adding collection views
    • Display
      • Rows
      • Cards & columns
      • Tables
      • Kanban boards
      • Calendar
      • Timeline
      • Gantt
      • Split-view
      • Charts
      • Maps
      • Pivot Table
      • Single record view
      • Grouping records
      • Record Colors
    • Filters
      • Logged in user
      • Relative Filters
      • Record values
    • Filter fields
    • Sort & limit
    • Row Action
    • Column Summaries
  • 📝Forms
    • Forms
      • Customizing Form Fields
      • Passing Linked Record Values to a Form
      • Dynamic Form Field Filters
      • E-Signature Fields
    • Public Forms
  • 📃Record Pages
    • Overview
    • Visibility Settings
    • Hidden Field Values
    • Record Comments
  • ✏️Field Formatting
    • Field visibility conditions
    • In-line editing
    • Conditional Highlight Colors
    • Dates & Time Zones
  • 📊Charts
    • Overview
  • 📂Data Management
    • Export Data
    • Import Data
  • 👥Users & Permissions
    • User Table
    • User Management
    • User Roles & Permissions
      • Record-level permissions
      • Field-level permissions
    • Open Sign Up
    • Offboarding Users
    • Testing as other users
  • ⏩Actions
    • Action buttons
      • Create records
      • Update records
      • Bulk actions
      • Barcode Scanner
      • Add a Comment Action
  • ⚡Workflows
    • Workflows
      • On-demand workflows
      • Comment Added Trigger
      • Watched Fields
      • Trigger webhooks
      • Send automated emails
      • For each item in a list...do...
      • Only continue if
      • Create a Record Action
      • Update a Record Action
      • Delete a Record Action
      • Deactivate a User Action
      • Reactivate a User Action
      • Send an Invitation Email Action
      • Add a comment to a record
      • Send a Push Notification
      • Ask Chat GPT Action
      • Summarize Text Action
      • Correct Grammar Action
      • Extract Keywords Action
      • Analyze Sentiment
      • Finish Text Action
      • Send a message to a Slack Channel
      • Send a message to a Slack User
      • Generate a PDF with DocsAutomator
  • 🔔Notifications
    • Notifications
    • Notification Preferences
  • 📑API Documentation
    • API Overview
      • Fetching Records
      • Fetching a Record
      • Creating a Record
      • Update a Record
      • Deleting a record
  • ⚙️Settings
    • General Settings
      • Live Mode
      • Custom Logos
    • Theme & Design
    • Progressive web apps
    • Navigation Settings
    • Spaces
    • Email Settings
    • Custom Code
    • Custom Domain
    • Login & Signup
      • Sign in Options
      • Single Sign On
      • 2FA - Two Factor Authentication
      • Client Portal User Add-On
    • Login Screen
    • User Lists
    • Integrations & API Keys
    • Billing & Usage
    • Support
    • Publishing
      • App Version History
  • 🔄Integrations
    • Zapier
    • Make (Integromat)
    • Sign in With Google
    • Intercom
    • SMTP Emails
    • Documint
  • ⚙️Account
    • Workspaces
    • Pricing
      • Client Portal Add-on (Legacy)
    • Transferring an App
    • Onboarding Call Preparation
Powered by GitBook
On this page
  • What are Tabs
  • Why You Should Use Tabs
  • Adding Tabs to Record Pages
  • Adding Tabs to Blank Pages
  • Hiding a Tab with Visibility Rules
  • Moving a Component to Another Tab
  1. Pages

Tabs

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

PreviousSidebar dividersNextAdding collection views

Last updated 1 year ago

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

  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

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

📄
Visibility Settings