Tabs Component

Display shared content pages in a compact, multi-tabbed structure.

On this page:

  • Accessible Tab Name Prefix setting.

> Read more about making this component accessible.

Last reviewed: May 23, 2022

Using This Component

This component initially has three tabs, Tabs, Advanced and Curated List, or if  you choose Child Pages, the third tab is changed to Child Pages.

  • The component is designed to display a series of shared content pages.  
  • The UBCMS title of each child or curated page becomes the title of their corresponding tab.
  • When child pages are added or removed, the corresponding tab will be added (or removed).
  • The component's height adjusts dynamically to show the entire content for each tab.  
  • The width of the tab titles will vary with the character length of each title. For the Child Pages option, this can only be adjusted by changing the title in each shared content page. For the Curated List option, the displayed titles can also be adjusted in the component itself. The maximum width is around 200 px. Titles display on one line only and titles that are too long will be truncated with an ellipsis (...).
  • When the published page is displayed, the visitor will see the contents of the first tab by default. Clicking another tab will load the new contents without refreshing the page, since the contents of all tabs are actually preloaded as the host page first loads.
  • Each tab can be bookmarked directly -- the page will load the page with that tab's content displayed first.
  • Content of each tab will be indexed separately by Google and other search engines.
5 tabs max

Title character count is a driving factor, but five tabs is our recommended maximum. Having too many tabs (or tabs with overly long titles) will ruin to look of your page.

Technical Restrictions

  1. Only shared content may be displayed with this component.
  2. The component's height will adjust automatically to the actual height of the displayed content for each tab.
  3. Tab title width will vary depending on the character length of each title. The maximum width is around 200 px. Titles display on one line only and longer titles will be truncated with an ellipsis. Width can not be adjusted by authors except by changing the wording of each title.

Configure - Main Settings

Click the wrench icon to 'configure' these settings.

Tabs Tab

Build tabs using: Choose between the default 'Curated' list option or 'Child Pages'.

  • If you prefer the default, then proceed to the second tab to adjust the settings further.
  • If you prefer to use a list built from child pages, choose that option and the second tab becomes a Child Pages tab where you can indicate the source of the shared content pages.
Accessible tab name prefix: Enter desired label for this set of tabs.
  • Sets the visible tab name with text that is only visible to screen readers. This solves the accessibility issue where there may exist multiple tab components on the same page that have tabs (links) with duplicate names.

Advanced Tab

Host page - Specify on what page of your site you would like any shared content shown. By default will be the current page.

Curated or Child Pages Tab

The thir dtab adjusts to your choice of your Curated or Child Pages.

Curated - Add one or more links to UBCMS pages that will then be displayed as tabs in the component.

Add Item - Click the '+' to add tabs.

  • Use the magnifying glass to browse for each source page within shared content (must start with /content/shared). 
  • Optionally provide a descriptive label to accompany each tab.  If not provided, the UBCMS will use the shared content page's title.

Child Pages - Indicate the location of the parent in shared content to define the pages that will then be displayed as tabs in the component.

  • Use the magnifying glass to browse for each source page within shared content (must start with /content/shared).

Advanced: Direct Linking to a Tab

To link to a tab in a Tabs component, click the tab in question and copy the URL that is displayed in the browser location bar. The main tab always loads by default, and shares the same URL as the actual page, but the other tabs insert their name into the page name of the URL.

For example, the tabs of the example on the Tabs component documentation page will display as follows:

Known Issue

Please note, while this link will load the page with the preferred tab content displayed, it will not load the page AT THE SPOT WHERE THE TAB APPEARS. This is a Known Issue that we are addressing.

Accessibility Concerns

See an Example

Was This Information Helpful?

(so we can thank you or request more details)
( addresses only please)