Using a Horizontal List Display
How to create a list with the Horizontal List Display
Creating the pages
- Before the creation of pages, double check that a Site Configuration page is established so that your navigation is in place.
- In the WCM, create a parent page that will contain the set of pages associated with each list item. Remember that each list item corresponds to a page.
- Select the parent page and create a set of two or more pages that will appear in the Horizontal List. Keep your page names concise, as longer page names will increase the width of the list item.
Building the Horizontal List Display:
- Double-click the first child of the parent page to open it in the editing window. Leave the parent page blank for now — we will set up redirects later.
- With the first child page open, add a List component to the page.
- Right click on the component and select “Edit.”
- Select the method of populating the list (Child pages, Fixed list, etc.)
Note: Make sure to set a Parent Page when building the list using Child Pages. - Be sure to select “Horizontal” from the “Display as” field.
- Check the checkbox field “Mark Current Page” so that a yellow background highlights the current list item.
- Click "OK."
Repeat for each page in the list — you can quickly add the component by using copy-and-paste.
Below is an example of a Horizontal List Display. The background colour of the current list item is yellow, the other list items are red.
Hiding the child pages:
By default, each list item page will appear as a child page in left-hand navigation. Make sure to hide the child pages in the left-hand navigation as users should be navigating through the child pages with the Horizontal List Display.
To hide your pages:
- Right-click on the page, choose Properties.
- Under Navigation Options check the Hide in navigation checkbox.
- Click OK and your child pages will be successfully hidden in the left-hand navigation.
Redirecting the parent page:
The parent page is blank because it needs to be re-directed to the first child page. This allows the first navigation button to appear in its active, highlighted state.
- In the WCM, right-click the parent page and go to Properties.
- Under the Advanced tab, click the search icon beside the Redirect field and locate the first child page.
- Click OK, and then click OK again in the dialogue box. Now any visitors linking to the parent page will be directed to the child page.
Tips and Tricks:
With the Horizontal List Display, you are giving your users the illusion of staying in the same page. In order to achieve this, each page in your list item set need to appear in the same place on the page. If your page has a title and a short piece of introductory text preceding the Horizontal List Display, every page must contain the same title and text content. You can also use a Reference component to reference this content to ensure consistency across every page.