Tab Set

The Tab Set is a layout component used to group other components within tabs that end users click to see page features and data. Nintex Apps components can be organized within specific tabs in the Tab Set to reduce time spent scrolling down the page.

The Tab Set is responsive, adjusting to the size of the screen. When there is not enough horizontal space to display all the tabs, some are displayed in a drop-down menu under the header "More."

Jump to:

Using the Tab Set component

The Tab Set provides a concise and guided user experience. It allows users to switch between data sets, visualizations, and more with one click. You can use tabs as guides for data entry or data updates, which makes applications more intuitive and reduces the time users spend to scroll or click in an app.

Add a Tab Set to the page, add tabs to it, and add components to each tab.

Add tabs

  • To add tabs, click Add tab on the Tab Set.
    • The Tab Set defaults to one tab.
  • To remove a tab, click the tab and click .
  • To reposition tabs, drag them left or right to the location you want within the Tab Set.

Add components to tabs

  • To add components to the tab, click and drag the components you want onto the tab within the Tab Set. You can set the properties in the component's properties panel. For more information, see Components.

Note:  Adding a Tab Set component to a tab creates a set of sub-tabs.

Component properties

  • Unique ID: An automatically generated alphanumeric identifier for the component. You can rename if needed. (Required)

  • Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style variant drop-down menu.

    Note: 

    • To refresh available style variant options, click Refresh style variants.

    • This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the aria-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) spec.

    Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

  • Height Strategy:

    • Fit to content: Sets the component’s size to fit its nested components.

      • Min height (optional): Sets the minimum height for the component, using a number and a sizing unit.

      • Max height (optional): Sets the maximum height for the component, using a number and a sizing unit.

    • Fixed Height: Sets an absolute height for the component, using a number and a sizing unit.

  • Margins: Sets a component's margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click All.

    • To set margins for each side individually, click Separate.

    Margins must be set using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

  • Defer tab rendering: To load and render only the content of the selected tab, turn on the toggle.
  • Allow HTML in tab labels: To render HTML markup within the tab header label, turn on the toggle.
  • Remember active tab: To reopen the last tab the user was on when they return to the page, turn on the toggle. For more information, see Optimize Personalization.

Standard display logic options are available to display or hide the component or feature.

Nested elements

Tab properties

  • Unique ID: An automatically generated alphanumeric identifier for the component. You can rename if needed. (Required)
  • Tab label: The text that appears as the tab's title in the component. Defaults to "New Tab".
  • Icon: The icon that appears beside the tab label. To choose the icon you want, click the icon selector.
  • Change order: Sets the order of the tabs from left to right.
    • To move the tab to the left, click .
    • To move the tab to the right, click .

Use these properties to add actions to individual tabs on the Tab Set.

  • When first shown: Actions only run the first time a user selects the tab on page load.
  • Whenever rendered: Actions run every time a user selects the tab.

To add actions, click Add. The following options are available:

Standard display logic options are available to display or hide the component or feature.