Side Tabs

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

There are several components allowed to be used inside of a tab. These include:

• Image
• Column Splitter
• Aside
• Info Panel
• Quote Box
• Rich Text
• Slate Form
• Social Share
• Subheading
• Video Player

In Page Builder:

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 in the Containers section.

Alternate method:

1. Click Components tab at top of content tree.
2. Locate Side Tabs component in the Containers section.
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:

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

If using existing Side Tabs Data (content):

4. Select an existing Side Tabs component from the Data folder.
5. Click Assign.

The Side Tabs component and toolbar are displayed.

• Edit the section title directly in Page Builder by clicking in the Side Tabs Section Title field and typing the desired text.
• The Side Tabs Section Title may also be edited in Content Editor.

In Page Builder:

1. Select the Side Tabs component.
2. Go to the Advanced styling section of the Design tab on the right side panel in Page Builder.
3. Click on the check box next to “Green Line” to add or remove.

Add the first tab, in Page Builder:

1. With the Side Tabs component selected, click the "+" icon to add a component.
2. Choose Side Tab Panel from the menu.  

If this is new Side Tabs tab content:

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

If using existing Side Tabs tab content:

3. Select an existing Side Tab Panel component from the Data folder.
4. Click Assign.

The Tab Panel component and toolbar are displayed.

Add additional tabs:

1. Click Components tab at top of content tree.
2. Locate Side Tab Panel component in the Components section.
3. Drag the Side Tab Panel component to the base of the Side Tabs component until a dark purple line appears.
4. Follow the above instructions to create and assign a new Tab Panel component data source or assign an existing data source.
5. 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 a Side Tab Panel within a Side Tabs component selected, click the Move up or Move down arrow and repeat as needed until the Tab Panel is in the desired location. 

1. Add a tab title using the text field at the top of the Side Tab Panel or the tab title field in the Content panel on the right side in Page Builder.
2. 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.
3. 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
4. Continue adding content to the component(s), following individual component guidelines.

In Page Builder:

1. Click the dropdown arrow to the right of the SitecoreAI icon in upper left.
2. Select Content Editor. Content Editor opens in a new tab.

In Content Editor:

3. Navigate to the page and data folder in the Content Tree.
4. Select the Side Tabs component.
5. To add a section title: Select the Add text to the Section Title field.
6. 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.
7. 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.
8. 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.
9. To delete a tab:
   1. Right click on the tab in the menu.
   2. Select Delete.
   3. Click on the OK button.
10. To reorder tabs:
    1. Click and drag tabs within the Content Tree.

Add tabs:

1. With the Side Tabs component selected, expand the Manage items section of the Design tab on the Element 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 Page Builder content canvas and editing the text directly on the page.