Work with page builder navigation

Learn how the Page builder navigation widgets work and how to configure them.

Page builder navigation

There are two levels of navigation shown in the Page builder theme. Both are instances of the same iWidget, but are parameterized to use different pages and CSS styles.

1. Banner navigation
   location: list of links at the top of the page

   file: $PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/bannerNav.jsp

   level: 1

2. Tabbed navigation
   location: row of tabs beneath the banner navigation

   file: $PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/tabNav.jsp

   level: 2

Navigation rendering

Each of the iWidgets is rooted at a navigation level, and displays the children of its root. The Banner navigation is rooted at level 0, or Content Root, and so displays the first level of pages. The Tabbed navigation is rooted at level 1, and shows the pages at level 2 that are under its root node.

The JSP files shown above print out the markup shown by the navigation iWidgets, along the iWidget definition. On page load, the iWidget is initialized and consumes the markup generated by the JSP. See Page Builder iWidgets for more information about iWidgets.

The markup is generated by the JSP, so the user does not need to wait until the iWidget initializes to see the navigation.

Navigation attributes

Some attributes of the navigation iWidgets can be configured.

strings
attachNode

ID of the HTML node that holds the navigation markup

class

CSS class added to the HTML node that holds the navigation markup

tabListClass

CSS class added to the UL containing the list of pages

tabClass

CSS class added to every page

firstItemClass

CSS class added to the first page in the navigation

selectedClass

CSS class added to the selected page

varyLevelCondition

JavaScript executed to determine if the navigation root is one level deeper in the selection model than its configured level numbers

level

navigation level at which to root the iWidget, out of box this is 0 for the Banner navigation and 1 for the Tabbed navigation

levels

number of navigation levels to show beyond the start level (start level is set by the "level" attribute). If this is not specified, all levels are shown.

openDelay

milliseconds to wait after hovering over a tab before opening a popup menu of its children

popupDelay

milliseconds to wait before opening a sub menu off a child menu

closeDelay

milliseconds to wait before closing a menu after it loses focus booleans

showInlineEditor

true if a link to create a page is to be shown in page edit mode

dndOperable

true if the pages are to be drag and drop enabled in page edit mode

Configure the navigation

The navigation attributes are passed into the iWidgets by putting them in the "iw-ItemSet" markup of the definition.

<div class="iw-iWidget iw-Standalone" id="navigationContainer">
    <a class="iw-Definition" href="/someurl/widget-catalog/ControlledNavWidget.xml"></a>
    <span class="iw-ItemSet" style="display:none" title="attributes">
        <a class="iw-Item" href="#level">1</a>
        <a class="iw-Item" href="#tabListClass">lotusTabs</a>
    </span>
</div>

The previous code shows tabbed navigation rooted at level 1. You can edit the iw-Items or add new ones in the JSP.

Navigation configuration examples

Make Banner navigation edits in PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/bannerNav.jsp

Make Tabbed navigation edits in PORTAL_HOME/theme/wp.mashup.cc.theme/installedApps/wp.mashup.cc.theme.ear/PageBuilder2.war/themes/html/PageBuilder2/tabNav.jsp
Remove the New Page link

Remove the "#showInlineEditor" iw-Item.

Disable drag and drop

Remove the "#dndOperable" iw-Item.

Change the level of navigation

Find the "#level" iw-Item in the iWidget definition to update where the navigation iWidget is rooted. To have the iWidget show the third level of navigation, root it at level 2:

<a class="iw-Item" href="#level">2</a>

Remove the child page drop-down menus

Set the "#levels" iw-Item to 0.

<a class="iw-Item" href="#levels">0</a>

If adding or removing levels of navigation and navigation priming is enabled there is one additional configuration. In the config.jsp there is a navigation priming container with the ID "selectionPathPrimer". There is a loop within this container that out-of-box starts with a value of 1. If you remove the banner navigation, you should start this loop at 0.

Navigation iWidget details

Both navigation elements are instances of the ControlledNavWidget iWidget. The widget listens and responds to events to refresh its markup or switch to a new page.

When a page link is clicked in server-side mode, there is a full page refresh, therefore the iWidgets are destroyed and re-created. In client-side mode, there is no page refresh, so the navigation widgets simply refresh their markup to indicate the page switch.

The ControlledNavWidget uses a singleton instance of the NavigationController JavaScript class. This class provides a tree model of the navigation by using the Enabler run time APIs. See Enabler_API_Quick_Reference for more information about Enabler APIs.

The NavigationController also provides the current selection path. A selection path is a list of pages from the root, down the navigation tree to the currently selected page. If adding or removing an instance of the navigation widget, also add or remove the container ID from the navigation priming attribute. To do this open theme.html and find the JavaScript object named "com.ibm.pb.themes.commonInit" set in an onload handler. Remove the nav widget container ID from the attribute named "navPrimingContainers". Out-of-box it looks like the following:

navPrimingContainers:  ["selectionPathPrimer","topNavLinks","navTabsRoot"]

Parent

Work with Page Builder
Page builder menus
Page builder iWidgets

Related tasks

Create top level page tabs
Move page tabs
Create child pages
Move child pages
Add content
Change page style
Change page layout
Hide content
Share pages
Use a different Dojo version
Page builder drag-and-drop
Hints and tips for page builder

Enabler API Quick Reference

  added more information about levels parameter Changed content type

+

Search Tips   |   Advanced Search