3.2.7.3 Creating the Navigator Component 

Table of contents | Previous | Next

Components

Navigator Component

In this article, we discuss how to build the Navigator component for the River Bend site. There are two key steps for building the navigator component.
1. Creating the Navigator Component and,
2. Formatting the Navigator Component

Creating Navigator Component

For this example, you will be creating a left navigator that will be in every page throughout the website. The navigator component will be displaying the River Bend site areas. To display the navigator component it is added to the presentation templates of the inner pages. To display the navigator, the component reference is added to the three presentation templates.

To add a left navigator component, you need to do the following:

• Create the left navigator component.
• Reference the left navigator component in the presentation template.
• Format the left navigator component by creating bold and normal HTML components.
• Reference the HTML formatting components in the left navigator component.

Following are the steps for creating the left navigator component:

1. Click New and choose Component Navigator
2. In the name field, enter nav-left

Tip: It is good style and helpful to use a naming schema for components. It makes references easier to understand. For navigators, use a nav- prefix. A reference then reads:

3. In the display title, enter Left Navigator
4. In the Description field enter
Left navigator for accessing site area sections.
5. In the Navigator Component section in the Start Type list, choose Selected.
This action indicates that you define the site area from which the search begins.

6. In the Selected Start Area section, click Select Start Area.
7. In the index, click River Bend.
8. Click OK.
9. Deselect Include Start so that River Bend does not appear in the navigator
10. From the Descendant Level list, select 1 Level.
This action defines that the first level of children site areas of River Bend are collected.
11. Deselect Show Content.

Note: If this option is selected, links to content in the current site area display in the navigator.

12. Select Expand current navigator branch one level

Note: If this option is selected, the navigator expands to display the children site areas of the current site area.

13. Select Expand navigator to display current site area
14. In the Header field, enter the following code:


15. In the footer field, enter the following code:

16. Indent each site area level and create a placeholder for the code you will add to format the site area links. In the Component Design 1 field, enter the following code:


17. Click Save… and then click Save and Close.

Formatting the navigator

To format the navigator so that the current site area is formatted differently from
the rest of the site areas in the navigator, you need to:

• Create HTML components to specify bold and plain formatting.
• Reference the bold and plain HTML formatting components in the left navigator component.

Creating HTML components to specify formatting

Follow these steps to create the bold and plain formatting components:
1. Click New and choose Component Html
2. In the Name field, enter HTML-Layout-Main Nav Bold.
3. In the Description field, enter:
This is the bold text formatting component.
4. In the HTML Component section, enter the following line of code:

Attention: Be sure to use single (‘) and double (“) quotation marks correctly.

5. Click Save and then click Save and Close.
6. Repeat steps 1 through 5 to create a new HTML component with the following changes:
- In the Name field, enter HTML-Layout-Main Nav Plain.
- In the Description field, enter the following:
This is the plain text formatting component.
- In the HTML Component section, enter the following line of code:

Referencing the HTML formatting components in the left navigator component

To specify the format for bold and plain and to indent each level in the site navigation, do the following:

1. In the item views navigator, expand Component Library.
2. Expand Components
3. Expand Navigators
4. Select nav-left or Left Navigator as its display name.
5. Click Edit.
6. In the Navigator Component section, scroll to the Component Design 1 field.
7. Delete the existing placeholder tag in the field, and enter the following line of code:

8. Click Save and then click Save and Close.