Skip to main content
Logo

Local view menu control

The local view menu control will create a menu showing the folder hierarchy for the current page including folders and pages, starting from a root folder specified in the control.

Inserting the control

Right click within the working area of the page then select the following menu options:

Insert web control > Navigation > Local view menu

Example of the output HTML

This example is a stripped down version of the HTML produced by the web control, non structural elements such as the title="" attribute have been removed for clarity.

Typical folder structure

└── Root folder
    └── Parent folder
        └── Current folder
            ├── item-one.aspx
            ├── item-two.aspx
            ├── item-three.aspx
            └── item-four.aspx

Rendered HTML

<div class="css-class">
    <div class="root-folder-class">
        <a href="/root-folder/root-homepage.aspx">Root folder</a>
    </div>
    <div class="parent-folder-class">
        <a href="/root-folder/parent-folder/parent-homepage.aspx">Parent folder</a>
    </div>
    <div class="current-folder-class">
        <a href="/root-folder/parent-folder/current-folder/current-homepage.aspx">Current folder</a>
    </div>
    <div class="current-item-class">
        <a href="/root-folder/parent-folder/current-folder/item-one.aspx">Item one - current item</a>
    </div>
    <div class="item-class">
        <a href="/root-folder/parent-folder/current-folder/item-two.aspx">Item two</a>
    </div>
    <div class="item-class">
        <a href="/root-folder/parent-folder/current-folder/item-three.aspx">Item three</a>
    </div>
    <div class="item-class">
        <a href="/root-folder/parent-folder/current-folder/item-four.aspx">Item four</a>
    </div>
</div>

Properties

The properties for the control are set initially when inserting the control into the page, but can be amended at any later date by simply right clicking on the control to display the Web control Editor window.

Standard

Name

The name field is used to identify the control on the page. Each use of this control on a page must have a unique name and can not contain any punctuation.

Behaviour

Max depth

This property is not used by the local view menu.

Hide root folder menu item

This value determines if the root folder is hidden in the menu. The default value is set to false resulting in the root folder being displayed. Setting this to true will hide the root folder.

Show root folder first level children

If checked, this setting determines if folders at the root level are shown, indicated by (First level child) in the example below.

└── Contensis (Root folder)
    ├── 11.0 (First level child)
    ├── 11.1 (First level child)
    ├── 11.2 (First level child)
    ├── 11.3 (First level child)
    └── 11.4 (First level child)
        └── kb (Parent folder)
            └── templates-and-design (Parent folder)
                └── web-controls (Current folder)
                    ├── item-one.aspx (Current item)
                    ├── item-two.aspx
                    ├── item-three.aspx
                    └── item-four.aspx

Appearance

Separator HTML

This setting accepts valid encoded HTML that is displayed between each menu item.

e.g. <hr/> <p>-----------</p>

Tag to render

This property determines the HTML tag to be used to wrap the list of navigation items. If left empty no wrapper is used.

Examples include div nav etc

<nav class=""> <!-- Tag to render -->
    <div>
        <a title="This is the title text" href="/parent/homepage.aspx">Parent folder</a>
    </div>
    <div>
        <a title="This is the title text" href="/parent/current/homepage.aspx">Current folder</a>
    </div>
    <div>
        <a title="This is the title text" href="/parent/current/item-one.aspx">Item one</a>
    </div>
    <div>
        <a title="This is the title text" href="/parent/current/item-two.aspx">Item two</a>
    </div>
</nav>

CSS class

This class will be applied to the wrapper HTML tag if specified in the Tag to render property. If the Tag to render property has not been set then the menu will be wrapped in a <div> tag.

Root folder CSS

This class will be used on the navigation item that represents the root folder navigation item. This will be the same folder specified by the root folder property.

└── Root folder <- Applied here
    └── Parent folder
        └── Current folder
            ├── item-one.aspx
            ├── item-two.aspx
            ├── item-three.aspx
            └── item-four.aspx

Parent folder CSS

This class will be used on the navigation item that represents the parent folder.

└── Root folder
    └── Parent folder <- Applied here
        └── Current folder
            ├── item-one.aspx
            ├── item-two.aspx
            ├── item-three.aspx
            └── item-four.aspx

Current folder CSS

This class will be used on the navigation item that represents the current folder.

└── Root folder
    └── Parent folder 
        └── Current folder <- Applied here
            ├── item-one.aspx
            ├── item-two.aspx
            ├── item-three.aspx
            └── item-four.aspx

Item CSS

This class will be used on the navigation item that represents the menu items of the current folder.

└── Root folder
    └── Parent folder 
        └── Current folder 
            ├── item-one.aspx (Selected)
            ├── item-two.aspx <- Applied here
            ├── item-three.aspx <- Applied here
            └── item-four.aspx <- Applied here

Current item CSS

This class will be used on the navigation item that represents the currently selected menu item.

└── Root folder
    └── Parent folder 
        └── Current folder 
            ├── item-one.aspx (Selected) <- Applied here
            ├── item-two.aspx 
            ├── item-three.aspx
            └── item-four.aspx

Misc

Move down prefix

This property is not used by the local view menu.

Move down suffix

This property is not used by the local view menu.

Move up prefix

This value prefixes the title text of the link with the text entered to the text box to all folders.

<a title="PREFIX This is the title text" href="/folder-prefix/homepage.aspx">Folder prefix</a>

Move up suffix

This value adds a suffix to the title text of the link with the text entered to the text box to all folders.

<a title="This is the title text SUFFIX" href="/folder-suffix/homepage.aspx">Folder suffix</a>

Item prefix

This value prefixes the title text of the link with the text entered to the text box to all menu items within a folder.

<a title="PREFIX This is the title text" href="/item-prefix.aspx">Item prefix</a>

Item suffix

This value adds a suffix to the title text of the link with the text entered to the text box to all menu items within a folder.

<a title="This is the title text SUFFIX" href="/item-suffix.aspx">Item suffix</a>

Data

Root folder

Use this setting to specify what folder should be used to start the local view menu. When no root folder is specified the root of your site will be used.