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.

Content Above the Tabs

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.
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: Basic Text
Enter a Title for your page.
In the Text and tables field, enter introductory text.
- For example, "Below, please find a listing of our recent publications."
Click Save & Close in the Home tab once you are finished entering text.

You may not always have introductory text. In this case, you can use a Page Title component that will only feature a title on the page. For more information, see these instructions: Page Titles

Creating Content with Tabs

Create a new component in your Building Blocks folder (see Basic Text for more information).

Select the Content schema from the drop down menu.
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.
Click Save & Close in the Home tab once you are finished entering text.
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.

To create a Tab Label, click on New Component in the Create tab in your Building Blocks folder.
Select Tab Label from the Schema drop down menu.
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.
Repeat this step for each content component you have created.

Keep the tab labels short and sweet, especially if you will have multiple tabs.

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.

In the Component Presentations tab of your page, click Insert at the bottom.
The first component to be listed should be your "landing" component.
- Select Content Full from the Component Template drop down menu.
Insert your first tab, and select Page Tabs from the Component Template drop down menu.
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:

Publications landing
2012 Tab Label
2012 Publications List
2011 Tab Label
2011 Publications List
2010 Tab Label
2010 Publications List

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

The content for each tab and the tab labels are all built onto a single page.

In addition, you can link to a tab on the same page by using an anchor link.

For more information, see these instructions: Links and Link Lists

Examples

The following screenshots show examples of a page with tabs.

Communications Support