University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Tabs Component

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

New Brand Features

Developed expressly for the new brand, but available for all sites. > read more about the digital brand transition

Using This Component

Add the component to the page. There are initially three tabs, Tabs, Advanced and Curated List. If you choose Child Pages, the third tab becomes Child Pages.

The component as it is first displayed on the page.

The component as it is first displayed on the page.

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.

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.

Tabs Tab

Initially, 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.

The component opened for editing.

The component opened for editing. Initially choose between a Curated or Child Pages list.

Advanced

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

Child Pages Tab

Indicate the location of the parent in shared content to define the pages to 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).

There are no further settings.

  • The UBCMS title of each child 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 opened for editing showing the Child Pages tab.

The component opened for editing showing the Child Pages tab.

Curated List Tab

Define the source of the shared content pages to be displayed as tabs in the compnent.

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.

There are no further settings.

An Example

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 component opened for editing showing several tab source pages defined.

The component opened for editing showing several tab source pages defined.

The corresponding component, displaying the three titled tabs.

Name University at Buffalo
The State University of New York
 
Affiliation A flagship institution in the State University of New York system, UB is the largest and most comprehensive campus in the 64-campus SUNY system. It is a member of the Association of American Universities.  
Founded 1846  
Character UB is a premier, research-intensive public university dedicated to academic excellence. Our research, creative activity and people positively impact the world. Like the city we call home, UB is distinguished by a culture of resilient optimism, resourceful thinking and pragmatic dreaming that enable us to reach others every day.  
President Satish K. Tripathi
Athletics Division I, Mid-American Conference
Mascot Victor E. Bull

Loading...

Loading...

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 prefered 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.

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.

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)

On this page:

See an Example:

Related Components:

Last Reviewed:

October 13, 2017