Navigation Nodes
| The center piece of any design template is the main menu, generated by the navigation node (wpNavigation). This node is inserted into a layoutbox and dynamically renders a multi-level menu based on the chapter structure of the web. You can create both horizontal and vertical menus, image or text based layout, with fly-out or drop-down options for multi-level functionality.
The sitemap node can be inserted into a chapter and renders a hierarchical set of links (a sitemap) of your web.
The location-path (wpLocationPath) (also known as "bread-crumb-trail") lists the parents of the currently selected chapter, in a linked path. This node is inserted into a layoutbox and can be styled to have smaller customized font/link styles. This is an especially useful feature for websites with many levels of content.
|
Screen Shots
Navigation
Navigation
Navigation
Navigation
Location Path
Sitemap
wpNavigation
The navigation node dynamically generates a menu (and its sub-menus if applicable) based on the chapter structure of your web. This node has a variety of options including:
Horizontal or Vertical Menu layout;
Image Based or Text Based Menu Items;
Drop-down or Fly-out options for Submenus.
Developers Note: To change the root level of the navigation use the following:
root-chapter: /chapters/chapter[@name='new_root_chapter']
Where to use this node
Attributes
Name | Use | Value | Help |
---|
width | oneof | 100%, default | The width of the navigation. Defaults to 100%. |
root-chapter | default | /chapters | Identifies the root (=parent) node of this menu. All sub-nodes of the root node are listed as level-1 menu links. |
max-levels | default | 2 | How many levels to expand the menu. Default=2, but any value is possible. |
expand-levels | default | 1 | On load, the navigation will expand this many levels. For example, "2" will show all level-1 and level-2 items of the menu tree. This attribute is only useful for vertical type="standard". |
type | oneof | popup, standard, subchapters | For "popup" (default), level-1 items are rendered side-by-side or stacked, and higher-level items will "fly-out" on roll-over of the appropriate level-1 items. For "standard", all level-1 items are shown, but only sub-chapters of the current chapter are expanded. Type "subchapters" shows only the subchapters or the current chapter. |
subchap-backtrack | oneof | no, yes | If type="subchapters", setting this attribute to "yes" will cause the navigation to list all siblings of the current chapter as level-1 items, with the current chapter expanded, showing the sub-chapters. |
use-active | oneof | no, yes | Determines whether or not the menu should use an active state of a menu item. (Ie. Show a different button image for the currently selected page.) |
Sub Nodes
Name | Type | Help |
---|
level | wpNavigationLevel | Navigation levels define styling for each level and sub-level of the menu. |
Sample
wpNavigationLevel
Navigation levels define the styling for each level of the menu. The order of the nodes is relevant in that the first level will apply to level-1, the second to level-2, and so on. Each navigation will contain at least 1 level. Some webs may have 2 or 3 levels depending on the the size of the website.
If n levels are defined, level n+1 of the navigation is defined the same as level n.
Where to use this node
Attributes
Name | Use | Value | Help |
---|
layout | oneof | horizontal, vertical | Choose whether the layout is horizontal or vertical. |
repeat-parent | oneof | no, yes | Used in sub-menu levels, determines whether you repeat the parent chapter in the submenu. |
Sub Nodes
Name | Type | Help |
---|
box-style | wpBoxStyle | Configures the styles for the level |
font-style | wpNavFontStyle | Configures the font style for the level. |
Sample
wpNavFontStyle
This node gives you the control to style the css for the font styles used in a menu. Specifcally this comes in handy when creating drop-down or fly-out menus where you want the menu items (links) to have a specific colour and behaviour.
Inherits from:
Where to use this node
Attributes
Name | Use | Value | Help |
---|
name | oneof | item, item_over | |
wpBoxStyle
Box styles control the appearance, size and positioning of the various levels and their associated menu items. Each level will have a box style which "wraps" the "items" in that level. In turn you can style an item inside the level to take on a certain behaviour. Eg. Changing background colour on hover.
Where to use this node
Sub Nodes
wpLocationPath
Create a linked bread-crumb-trail on each page so users can back-track through pages. This node is inserted into a layout box and can be custom styled using the "footnote" style in the font style selector.
Where to use this node
Attributes
Name | Use | Value | Help |
---|
text-transform | oneof | normal, lowercase, uppercase | Provides an option to explicitly define the case of the bread-crumb-trail. |
Sub Nodes
Name | Type | Help |
---|
separator-bullet | wpImage | Allows the use of an image to separate the links. |
Sample
wpSitemap
Add this node anywhere in a chapter node to generate a sitemap of your web site. This is an overview of all chapters set to "show in menu = yes" and will help users quickly find their way around your site.
Typically, this node will be inserted within a chapter called "Site Map" or something similar.
Where to use this node
Attributes
Name | Use | Value | Help |
---|
title | optional | | This will insert a tile above the sitemap. |
style | oneof | standard, detailed | Choose whether you want to display shorttitles (simple) or titles (detailed) as the labels for each entry. |
column | oneof | 1, 2 | Determine whether the list is single or 2-column. |
Sub Nodes
Name | Type | Help |
---|
bullet | wpImage | Adds a bullet before each item. |
Sample
wpSubChaptersList
This node creates a bulleted list of all the sub chapters within the current chapter. The show-in-menu attribute is used within the chapter to determine whether or not the sub chapter will appear. The include-all attribute if set to yes will display all chapters regardless of the show-in-menu value.
Where to use this node
Attributes
Name | Use | Value | Help |
---|
style | oneof | standard, detailed | Choose whether you want to display shorttitles (simple) or titles (detailed) as the labels for each entry. |
Sample