In most cases the standard Navigation tools described in this section provide all the controls that are needed for app creation and display.

In some situations, such as a very large site with many levels and a lot of content  - such as this site itself - you may want to use an alternate method.

Site Tree Component in Stacked Navigation

The images below are illustrating how to use multiple Site Tree components embedded on a Text Zone of a left Layout Element to provide expanding and collapsing navigation.

Create the Left Layout element, and adjust the Zone joins:

Then, in Zone 2 set to Text (not Navigation), embed your Site Tree Components.

Note:
In this example the Empty Zone 1 is providing 9px of left padding

If you want headings between the tree segments, configure them on this surface.

As a reminder you will find:

General information on the Site Tree component is here...

Display information on the Site Tree component is here...

We can take advantage of the inherent expand and contract characteristics of the Site Tree to build left navigation.

In the above example a number of Site Tree Components have been added to the Site.

Each one is set in its Settings | Options to have an explicit page as the Tree root, each of which is a major node in the site tree itself.

The Tree type is set to Minimal, and the Open and Close Icons are set to Small chevron

In the example above the styling of the headings between the embeds is done explicitly on the Text surface of the Zone in the Layout Element (not in the Behavior Editor of the Site Tree component).

Tip:
Remember that the Layout Element may need to be called by the site Pages if their Behavior Editor Setting is not set to "Surround the page with 'All permitted layout elements'".

General Inheritance rules apply.