Tabs

Yes, by adding a URL parameter that specifies the panel’s GUID (unique identifier). See “Instructions for Use,” below, for more information.

No, images are not supported in the heading.

In Page Builder:

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

Alternate method:

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

The Tabs component is displayed.

Add the first tab, in Page Builder:

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

If this is new 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 Side Tab Panel component and hit enter.
6. Select the item and click on the Assign button.

If using existing Tab Panel 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 location in the Tabs component where the tab should be inserted. A dark purple line appears to indicate placement location.
4. Follow the above instructions to create and assign a new Side Tab Panel component data source or assign an existing data source.
5. Add up to 10 tabs to display in a Tabs component. Any additional tabs added over 10 will not display.

Change tab order:

1. With a Tab Panel within a Tabs component selected, click the move handle on the left end of the component toolbar and drag the panel to a new location within the Tabs component. A dark purple line appears to indicate placement location.

1. On the page canvas, click on the Tab Title field and enter text to add a panel Heading.
2. In the panel content area below Title, click the purple “+” and select a type of content to add from the list of available options.

Alternate method: 

1. Click Components tab at the top of the content tree.
2. Drag an appropriate component into the Tabs panel placeholder box.

To assign a new component data source to a tab component:

1. Click “+” to the right of Data.
2. Give the data source a unique name.
   1. Tip: Include a reference to the panel name to more easily match this data source to the correct panel.
3. Click Assign.

To assign an existing data source to a tab component:

1. Select the data item.
2. Click Assign.

Repeat as necessary to add all panels and to add content to all panels. Follow instructions for specific components being added to panels.

Locate the Tabs component:

1. Open Content Editor:
   1. In Pages, click the dropdown arrow to the right of the SitecoreAI Cloud icon in upper left.
   2. Select Content Editor. It opens in a new browser tab.
2. If the Tabs component does not appear in the content tree, close the page’s Data node and expand it again to refresh the content tree.
3. In the content tree, expand Content > MSU > site name > Home > page name > Data.
4. Locate and expand the Tabs component.

Add a Panel:

1. Right click the Tabs component.
2. Select Insert, then select General Tab.
3. Add content in the main pane on the right side.

Edit an existing panel:

1. Click and expand the panel in the content tree.
2. Edit as needed in the main content pane on the right side.

Tips for Using Images:

• Alt text can be changed in Page Builder (click the Alt icon on the image toolbar) or Content Editor (Properties link in the Image panel), or when the asset is loaded into Media Library or Content Hub.
• An image size can be changed in Content Editor > Image > Properties. HTML uses width and height attributes.
• The image margin (i.e., padding) can be changed in Content Editor > Image > Properties.

Delete a Panel:

1. Locate and expand the Tabs component.
2. In the content tree, right click the panel.
3. Click Delete and confirm.

Delete the Tabs Component:

1. In the content tree, right click the Tabs component.
2. Click Delete and confirm.

Publish Changes: 

1. Return to Page Builder by closing the Content Editor browser tab.
2. Refresh the canvas to see changes.
3. Preview and publish the page.
    

Link to the top of the tab component:

1. Select the tab component

2. Navigate to the Advanced styling of the component options in the right-hand pane

3. Add the desired anchor text to the PAGE ANCHOR ID field (use a short alphanumeric ID name with no spaces or special characters)

4. Set the link to that tab component by appending the URL of the link with the PAGE ANCHOR ID used on the tab component.

   1. URL format is [site URL]#PAGE ANCHOR ID, for example a link to the Component information tab component on this page would be: https://martech.msu.edu/website-technology/sitecore-cms/xmc-component-guide/tabs#information

Link to a specific tab:

• At this time, there is not a way to set a link anchor to a specific tab content. This will be a future enhancement.

In Page Builder:

1. Click the Tabs component to display the toolbar.
2. In the “Tabs” right column, expand Manage items.
3. Change Item 1, which is automatically created, as needed:
   1. Rename by clicking “…” to the right of the item and giving it a new name.
   2. Delete item by clicking “…” to the right of the item and click Delete.
4. To add a panel:
   1. Click “+ Add new” and click the General Tab button.
   2. Give it a unique name. Hit enter.
   3. Wait for the page to refresh before making additional changes in the Manage items menu.
5. To rename a panel: click “…” to the right of the item and enter a new name.
6. To delete a panel: click “…” to the right of the item and click Delete.
7. To reorder panels: click “…” and use the up and down arrows to change the tab order.

Initially, a Tabs panel appears without a title. The content area contains a “+” button.