Navigator formatting examples | HCL Digital Experience

You use HTML to format the layout of a navigator.

  • Navigator elements can have more than one element design.
  • Each level in the navigator can have its own element design.
  • If you want all the levels in your navigator to look the same, then you build one element design only.
  • If there are three levels in a site area but only two element designs in your navigator, then the last two levels in your navigator use the final element design.

The following tables contain some examples of the ways you can format the look of a navigator.

Simple two-level navigator

This example shows the basic structure of the element design that is used by a navigator.

Table 1. Simple two-level navigator
Design Details Design
Navigator result design 1 A <b> tag is added to display the text in the first level of the navigator in bold. 
<b>
[placeholder tag="namelink" ]
</b><br>
Navigator result design 2 The second design is repeated for every link that is returned by the parameters that are defined in the navigator element after the first level. 
[placeholder tag="namelink" ]
<br>

Navigator used in a rendering portlet

In this example, a URLCmpnt tag is used to create a link instead of a placeholder to specify the name of the portal page links generated by the navigator:

Table 2. Navigator used in a rendering portlet
Design field Design code
Header 
<Table>
Navigator result design 1 
<tr><td>
<b>
<a HREF=
"<URLCmpnt context="autofill" type="content" mode="portal" portalTarget="URLMap"]"
target="_blank"> [Property context="autofill" field="title"] </a></b>
</td></tr>
Navigator result design 2 
<tr><td>
<a HREF=
"[URLCmpnt context="autofill" type="content" mode="portal" portalTarget="URLMap"]"
target="_blank"> [Property context="autofill" field="title"] </a></td></tr>
Footer 
</Table>

An unordered list

In this example, unordered list tags are used to format navigator results. This design requires the following navigator parameters to be selected:
  • Show header, footer, and separator fields for each result design
Table 3. Simple two-level navigator
Design Details Design
Header 1 The header is used to open new <ul> and <li> tags at each level in the navigator. 
<ul><li>
Navigator result design 1 The placeholder tag is used to render the name and link of each item in the navigator. 
[placeholder tag="namelink"]
Separator 1 The separator field closes and open the <li> tag for each item that is displayed in the navigator. 
</li><li>
Footer 1 The footer is used to close <ul> and <li> tags at each level in the navigator. 
</li></ul>
Navigator result design 2 In this example, you do not need to add any markup to the Navigator result design 2. The markup that is entered in Navigator result design 1 is automatically used for the other levels of the navigator.