Display shared content pages in a compact, multi-tabbed structure.
This feature works comparably in both the Classic and Flex UI versions of the UBCMS. In the future, screenshots and language will be updated to reflect Flex UI.
Last reviewed: September 22, 2021
This component initially has three tabs, Tabs, Advanced and Curated List. If you choose Child Pages, the third tab becomes Child Pages.
The component is designed to display a series of shared content pages. Each page becomes an independent tab.
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.
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.
Build tabs using: Choose between the default 'Curated' list option or 'Child Pages'.
Host page - Specify on what page of your site you would like any shared content shown. By default will be the current page.
Indicate the location of the parent in shared content to define the pages to be displayed as tabs in the component.
There are no further settings.
Define the source of the shared content pages to be displayed as tabs in the compnent.
Add Item - Click the '+' to add tabs.
There are no further settings.
Below is an example, with three source pages defined. The titles are left blank to display the actual titles of the shared content page.
The corresponding component, displaying the three titled tabs.
|Annual Revenues|| |
|Research||$423.8 million (FY 2019-20)|
|Endowment||$788 million (FY 2019-20)|
|Economic Impact||$1.7 billion (FY 2019-20)|
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:
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.
For the Tabs component, this setting provides that tab with additional text that is visible to screen readers. This solves the accessibility issue where there may be multiple Tabs components on the same page that have linked content with otherwise duplicate names.
Best practice: decide on a consistent pattern that is easy for multiple people to reproduce and curate over time.