You are here: Administrators Reference > Site Administration > Trees


The ability to quickly render hierarchical tree structures is valuable for many applications, particularly for producing Megamenus, a popular navigational device for fast information discovery and retrieval. This release enables the easy creation, modification, distribution, and control of node-based tree structures for creating Megamenus and other hierarchical representations. See the CommonSpot demo site for examples. See also the description of Trees in the Demo Site Guide and the Tree Element in the Elements Reference.

For example, instead of creating and managing multiple Linkbar Elements or other submenu types, or creating complex scheduling for different navigation structures, you can use CommonSpot Trees to quickly create global, hierarchical navigation, and selectively assign editing or administrative rights to individual contributors or groups.

Terminology and CommonSpot Features

Each entry in a tree is a node.

The topmost node is the root node.

Each node in a tree may or may not have one or more child nodes, entries lower in the tree hierarchy.

Any node with children is a branch node, also known as a parent or ancestor node.

Any node without children nodes is a leaf node, or terminal node. Children at the same level of the hierarchy are siblings.

In CommonSpot, each tree node includes basic parameters such as title, description, and link target information. You can quickly create tree structures, then dynamically define node hierarchy, add or remove child and sibling nodes, move nodes up or down the hierarchy, selectively activate/deactivate nodes or node segments, and modify tree or node properties. Nodes can include text, images, or other rich content, whose rendering is controlled through Tree Navigation Layout Properties.

You can optionally assign render handlers to define Tree nodes using other CommonSpot Elements. This release also includes a factory render handler and sample XML that you can use as the basis for quickly producing styled Megamenus. See the files and the comments they contain in \commonspot\samples\tree\megamenu. See also the example trees, megamenus, tree-based navigation, and associated render handlers used in the CommonSpot demo site.

CommonSpot includes factory layouts for unordered, ordered, definition, and simple lists (ul,ol,dl,div) and a simple tree type.

Mapping Trees to Subsites

A key feature of Tree Navigation is the ability to automate the generation of menus that logically map to existing subsite structures and that can conveniently change as site and subsite organization changes. To take advantage of this feature, CommonSpot includes the ability to define tree "families" - collections of related trees - and bind tree members to subsites.

Once implemented, CommonSpot searches up the subsite hierarchy from the current page to find a binding to a tree in the selected family and displays the first one found. This design lets subsite administrators create (and optionally modify) trees bound to individual subsites and to display them on all pages created within the subsite, without granting edit access to templates where Tree Elements are defined.

Because CommonSpot continues up the subsite hierarchy until it finds a binding for the selected family, bindings apply to all nested child subsites where no closer binding applies. If CommonSpot finds no binding, nothing is displayed. Binding a tree to the root subsite effectively provides a global default for that family and is recommended. To ensure that CommonSpot displays the correct tree, bind only one tree per family to each subsite.

You must have subsite admin rights to add or remove tree bindings.

Standalone and Default Trees

Another configuration option is to always show the same tree on a page or template. CommonSpot comes with one built-in family named Default, which cannot be edited or deleted. The Default family is a catch-all for standalone trees that aren't related to others. You must explicitly select Trees in the Default family to show them.

You can also create your own default, for example, Left Nav, or Departments.

Adding Trees to Your Site

To make flexible node-based navigation structures available to authors and editors at your site:

  1. Create classifications for trees by entering XML property and node definitions for one or more Tree Types, and optionally select a default layout to apply when a tree is first defined for display on a page. Contributors or designers adding trees to pages or templates can override default layouts through the Tree Element menu, at the page/template level.
  2. Create one or more trees for each type by first defining tree properties. As described above, you can create trees that automatically map to subsite hierarchy by creating tree families, then adding trees with bindings to specific subsites. For example, to create a menu that automatically maps to every subsite under academics/undergraduate/programs/, create a family named ProgramNav and a tree named LeftNav bound to every child subsite. When inserted into any page or template at one or more levels below the programs/ level, that tree automatically displays every level of the subsite hierarchy above the current page.

Once defined, tree properties, nodes, and layouts can display as modifiable options to contributors who use the Tree Element to create and define tree structures at the page or template level. You can enable/disable administrative or editing permissions for each tree based on the level of central control vs. local flexibility desired. View, add, delete, or modify trees through the Manage Trees dialog.

Adding Trees to Pages or Templates 

By default, the Tree Element is available from the Link & List section of the Element Gallery. Contributors or designers add trees to pages or templates by choosing this Element, then configure it by selecting a Tree. CommonSpot presents the option to select a specific tree, dynamically map tree nodes to subsite hierarchy, or to create a placeholder (select none). See the Tree Element in the Elements Reference for details on how options defined here display to contributors.

Once saved, contributors can optionally edit the tree by creating, moving, or deleting tree nodes to reflect content logic. CommonSpot includes a rich set of options for defining and ordering tree nodes (for example, set to current page, include image, or choose style) and easily creating and modifying tree structures. See Edit tree.

Tree layout options control which of the standard fields are enabled/disabled when Trees are published. See Tree Navigation Layout Properties in the Elements Reference for details.

You can define styles for all tree types. For list trees structures, CommonSpot applies classes which have no effect until you define, register, and assign classes with identical names in CommonSpot. Create a style sheet naming these classes and add them to a style sheet set registered in CommonSpot. See Style Sheet Sets in the Contributor's Reference.



Related Links

Manage Trees

Manage Tree Families

Manage Tree Types

You can download PDF versions of the Content Contributor's, Administrator's, and Elements Reference documents from the support section of (requires login).

For technical support: