Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Side Tabs

Side Tabs

The Side Tabs component organizes content into different content tabs that are controlled by tab headings to the left side of the content area. Side Tabs are best used when displaying related lists of links with a small amount of text, images with descriptions or summary content that links to more in-depth pages.

side-tabs-example
Figure 1: Example of a Side Tabs component with five tabs.


 

Component Information

  • Side Tabs can be used to present multiple sections of content in a relatively small amount of space on a webpage. 
  • The tabs can contain different amounts of content and different types of components. 
  • Side Tabs can be used in the main body area of pages.

Template Data

Section Title (single-line text)

  • The label that appears above the Tab label subheads, at the top of the left side of the component. This may be edited in Pages, Content Editor or Explorer.

Optional green line (checkbox in Pages)

  • This checkbox appears in Pages under Advanced Styling. When checked, a decorative green horizontal line appears below the Section Title.

Frequently Asked Questions

Content authors can have up to ten tabs in a Side Tabs component.

It is best to add or edit a Side Tabs component, its tabs and any tab components in Pages. Tab component content is best added in whichever editor works best for that specific component.

Instructions for Use

In Pages:

  1. Select the page in the content tree.
  2. Click “+” button in any Placeholder box below the Breadcrumb links.
  3. Select Side Tabs component from list.

Alternate method:

  1. Click Components tab at top of content tree.
  2. Locate Side Tabs component.
  3. Drag the Side Tabs component to any area of the page below the Masthead and Breadcrumb links.

If this is new Side Tabs content:

  1. In the “Assign content item” window, hover over the Data folder and then click on the “+” icon that appears to open the options menu.
  2. Click Side Tabs with Tab.
  3. Type in the desired name for the Side Tabs component and hit enter.
  4. Select the item and click on the Assign button.

If using existing Side Tabs Data (content):

  1. Select an existing Side Tabs component from the Data folder.
  2. Click Assign.

The Side Tabs component and toolbar are displayed.

  • Edit the section title directly in Pages by clicking in the Section Title field and typing the desired text.
  • The Section Title may also be edited in Content Editor or Explorer.

In Pages:

  1. Select the Side Tabs component.
  2. Go to the Advanced styling section of the Component Options panel on the right side in Pages.
  3. Click on the check box next to “Green Line” to add or remove.
Note: When making changes to the Side Tabs component using Manage items, allow time for the page to refresh between each change.

Add tabs:

  1. With the Side Tabs component selected, expand the Manage items section of the Component Options panel on the right.
  2. Click on the “+ Add new” link to add a tab.
  3. Hover over a tab until the three-dot icon appears. Click this icon to access options to rename or delete a tab.
  4. Choose General tab.
  5. Type the desired name for the tab. This will also be the initial Tab title. Hit enter.
  6. Add up to 10 tabs to display in a Side Tabs component. Any additional tabs added over 10 will not display.

Change tab order:

  1. With the Side Tabs component selected, expand the Manage items section of the Component Options panel on the right.
  2. To change the order of tabs, click and drag them into the desired order in the Manage items section.

Rename or delete tabs:

  1. With the Side Tabs component selected, expand the Manage items section of the Component Options panel on the right.
  2. Hover over a tab until the three-dot icon appears. Click this icon to access options to rename or delete a tab.
  3. You can also rename a tab by clicking in the Tab Title field in the Pages content canvas and editing the text directly on the page.
  1. If more than one column is required, first add a Column Splitter to the tab placeholder. Column Splitter and Row Splitter components can also be combined if multiple column and single column content sections are needed within the same tab.
  2. Add the desired component(s) to the tab placeholder(s). Components should be added in the Data folder level for the page. They should not be placed under the Side Tabs component. Allowed components include:
    • Image
    • Column Splitter
    • Accordion
    • Aside
    • Info Panel
    • MSU Rich Text
    • Quote Box
    • Slate Form
    • Social Share
    • Subheading
    • Video Player
  3. Continue adding content to the component(s), following individual component guidelines.
  1. After adding the component in Pages, click to select the component. Click the Open in Explorer icon at the top of the component. Explorer opens in a new tab.
  2. To add a section title: Add text to the SectionTitle field.
  3. To add tabs:
    1. Click + Create at the base of the column to the right of the selected Side Tabs component. 
    2. Click General Tab.
    3. Enter a tab name and hit enter or click the checkmark icon.
    4. Add a tab title in the TabTitle field of the Tab Content menu.
  4. To rename tabs:
    1. Select the tab in the menu.
    2. Change the name in the TabTitle field of the Tab Content menu.
  5. To copy a tab:
    1. Select the tab in the menu.
    2. Click the three dots in a circle icon at the top right corner.
    3. Select Duplicate.
    4. Enter a name for the new tab.
    5. Click on the Duplicate button. 
  6. To delete a tab:
    1. Select the tab in the menu.
    2. Click the three dots in a circle icon at the top right corner.
    3. Select Delete.
    4. Click on the Delete button.

In Pages:

  1. Click the nine-dot cube icon at the upper left.
  2. Select the environment (i.e., Prod).
  3. Select Content Editor.

In Content Editor:

  1. Navigate to the page and data folder in the Content Tree.
  2. Select the Side Tabs component.
  3. To add a section title: Select the Add text to the SectionTitle field.
  4. To add tabs:
    1. Right click on the Side Tabs component in the Content Tree.
    2. Click Insert.
    3. Select General Tab.
    4. Enter a name for the tab and click OK.
  5. To rename tabs:
    1. Select the tab in the Content Tree.
    2. Change the name in the Tab Title field of the Tab Content menu.
  6. To copy a tab:
    1. Right click on the tab in the menu.
    2. Click Duplicate.
    3. Enter a name for the new tab.
    4. Click on the OK button.
  7. To delete a tab:
    1. Right click on the tab in the menu.
    2. Select Delete.
    3. Click on the OK button.
  8. To reorder tabs:
    1. Click and drag tabs within the Content Tree.

Tool Use Guide

 PagesExplorerContent Editor
Add componentOptimal  
Add section titleOptimalPossiblePossible
Add section title green lineOptimal  
Add tabsOptimalPossiblePossible
Rename tabsOptimalPossiblePossible
Delete tabsOptimalPossiblePossible
Copy tabs PossiblePossible
Reorder tabsOptimal Possible
Add content to tab*Optimal  

*Add content type and then follow component-specific instructions

 

 

Documentation updated: August 7, 2024

XMC Component Guide