Tabs

In Pages:

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.

If this is new Tabs content:

1. In the “Assign content item” dialog box, hover over Data until a “+” appears to the right.
2. Click “+” and select “Tabs with Tab.”
3. Give component a unique name and hit enter.
4. Click Assign.

If using existing Tabs Data (content):

1. Select Tabs from the list.
2. Select an existing Tabs in the Data folder.
3. Click Assign.

The Tabs component and toolbar are displayed.

In Pages:

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.

1. In the middle pane, or content pane, add a Tab Title by clicking on the Tab Title field and entering text. The title is the panel Heading. 
2. In the panel content area below Title, click the purple “+”and select a type of content to add.
3. Select one of the recommended components from the dialog box. Recommended components include:
   1. Accordion
   2. Image
   3. Mixed Content Grid
   4. MSU Rich Text
   5. Quote Box
   6. Subheading
   7. Text Fact Grid

Alternate method: 

1. Click Components tab at the top of the content tree.
2. Drag a 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 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.

1. Click Tabs component to display toolbar.

2. Click Explorer icon.

   

    

    

    

    

    
3. In left pane, locate and click the Tabs component.

4. Locate and click a Tabs panel.

   

    

    

    

    

    
5. To create a new Tabs panel:
   1. Click “+ Create” in Tabs panel column, select General Tab.
   2. Give it a unique name and click the checkmark icon.
   3. Add content in right pane.
6. To edit existing Tabs panel:
   1. Click a Tabs item in Tabs panel column.
   2. Change content in right pane.
7. To delete a Tabs panel:
   1. Click a Tabs item in Tabs panel column.
   2. Click “…” in right pane.
   3. Click Delete.
8. Return to Pages by closing the Explorer browser tab.
9. Refresh the screen.
10. Preview and publish the page.
     

Locate the Tabs component:

1. Open Content Editor:
   1. In Pages, click 9-dot cube icon in upper left.
   2. Select Environment.
   3. 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 > sitename > 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 Explorer 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 Pages by closing the Explorer browser tab.
2. Refresh screen 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.