Side Tabs

• 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 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 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 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 Tab Panel component in the Components section.
3. Drag the 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 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.