Tabs

Tabs are a helpful way to categorize text into different sections so that the pages remain shorter.  

When you want to list a considerable amount of content on your page that is all related but can be broken down by categories (chronological, target populations, etc.), it's best not to "laundry list" this text. Visitors are unlikely to read beyond a certain point on the page, and a helpful way to keep the pages short is to use Tabs.

The following instructions will provide information on how to use Tridion to create and insert Tabs onto your page to organize your content.

Table of Contents

Content Above the Tabs

1. Determine how your text can be broken down.

   • For example, if you're using tabs for a publications page, separate the publications by years (2012, 2011, 2010, etc.) before you begin to create your components.

2. Once you've determined how you want to break down your information, create a new component in your Building Blocks folder.

   • Select the Content schema from the drop down menu.

   • Consider this the "landing" component for your page.

   • For more information on creating a Basic Text component, see these instructions: https://ysmweb.atlassian.net/wiki/spaces/HELP/pages/1785561156

3. Enter a Title for your page.

4. In the Text and tables field, enter introductory text.

   • For example, "Below, please find a listing of our recent publications."

5. Click Save & Close in the Home tab once you are finished entering text.

Creating Content with Tabs

Create a new component in your Building Blocks folder (see https://ysmweb.atlassian.net/wiki/spaces/HELP/pages/1785561156 for more information).

1. Select the Content schema from the drop down menu.

2. Enter text in the Text and tables field.

   • Depending on how many paragraphs you want under each tab, you may need to use the Paragraph heading field to help further distinguish your content.

3. Click Save & Close in the Home tab once you are finished entering text.

4. Repeat steps 2-3 for each section you want to include on your page.

Once you've completed these components, you're ready to create tab labels.

Creating Tab Labels

Once you’ve created a “landing” Content component for above the tabs and the content that will go underneath each tab, you need to create the Tab Labels.

1. To create a Tab Label, click on New Component in the Create tab in your Building Blocks folder.

2. Select Tab Label from the Schema drop down menu.

3. Enter the name for your label.

   • Some examples of names used for tab labels:

     • “2012”

     • “Information for Parents”

     • “Nutritional Guide”

   • Do not enter the word "label" in the Tab Label field.

4. Repeat this step for each content component you have created.

Placing the Tabs and Content on the Page

Once all of your content and tab labels have been created, you're ready to place these components on your page.

1. In the Component Presentations tab of your page, click Insert at the bottom.

2. The first component to be listed should be your "landing" component.

   • Select Content Full from the Component Template drop down menu.

3. Insert your first tab, and select Page Tabs from the Component Template drop down menu.

4. The third component listed is the content component that includes the information associated with that tab.

   • This should also be a Content Full template.

An example order for a page with tabs is below:

1. Publications landing

2. 2012 Tab Label

3. 2012 Publications List

4. 2011 Tab Label

5. 2011 Publications List

6. 2010 Tab Label

7. 2010 Publications List

Once you've entered all of your components onto the page, you're ready to publish!

Examples

The following screenshots show examples of a page with tabs.

Open

Open

Instructional Video