In this section you will learn about:

  • The different types of navigation
  • The basics of adding navigation to your templates
  • Navigation settings/parameters
  • The common XSLT navigation templates and which to use.

First, it might prove useful to delve into the kinds of navigation we might encounter on a typical website. Here's a few examples.

This navigation is the most common type, and houses the primary navigation items for the website, usually things like home, shop, categories, about, contact and so on.

Sub-navigations are used to fold out additional items belonging to a parent

This type is used to create a path on more complex websites with much content. This can be helpful for users.

On sites with Ecommerce it is handy to have a product navigation, conventionally placed either at the left or at the top.

Having pages and nodes dynamically rendered as navigations on your page is a core requirement to any website.

Luckily this is easy with Dynamicweb, and is done by using a special dynamicweb class on an <ul>-element. Obviously there's a bit more to this, as well as multiple settings you can use.

See Implementing chapter for a thorough explanation.

XSLT is a code language that has proven itself powerful for handling navigation, as it has a natural strength in traversing pages/nodes and outputting them as raw HTML.

By default, Dynamicweb wraps ship with some XSLT-templates,offering different renderings. All are listbased (<ul></ul>) and easy for you to style, and of course you can edit the navigation-templates directly if you wish so.

Dynamicweb will try looking for XSLT-templates in these locations:

  • /Templates/Navigation
  • /Templates/Designs/Navigation
  • /Templates/Designs/YourCustomDesign/Navigation

The following XSLT navigation templates are supplied with Dynamicweb, either by default or as a part of Dynamicweb Wrap:


Used for

Render style


Primary navigation menu




Primary navigation menu



With dropdown items

(Uses Bootstrap v3)


Primary navigation menu (mobile/off-canvas)




Breadcrumb / path




Ecommerce (product) navigation


Left, vertical


Ecommerce (product) navigation


Top, horizontal



In addition to creating content placeholders, you need to make any static navigation in your layout dynamic. Dynamicweb relies on XML/XSLT-based navigation. The template applied to the UL is a XSLT template and cannot be converted to a Razor template.

To make your navigation dynamic:

  • Locate the markup in your layout template which holds the navigation. Navigation must be an unordered list, i.e. an <ul> element – if it is not, wrap it in one.
  • Assign an ID to the element, and a class called dwnavigation

This uses a set of default values, and a default layout template (e.g. LeftNavigationEcom.xslt) to render the navigation.

You can (and should) customize your navigation behavior by adding a Dynamicweb-specific attribute called data-settings to your UL element. See below for a table with data-settings parameters.

<ul class="dwnavigation" id="leftnavigation" data-settings="startlevel:1;endlevel:4;template:LeftNavigationEcom.xslt;"></ul>

Do not use Razor code in the attributes of a navigation. Unlike placeholders, the class attribute cannot contain a Razor specified class. Wrap the entire UL in a div instead.

The following data-settings are available to you:



Default value

Possible values


The absolute level from which the XML should include navigation items from




The absolute level to which the XML should include navigation items to




Name of XSLT template used for parsing the navigation XML


Any valid existing navigation XSLT template. Must be placed in /Templates/Navigation, /Templates/Designs/Navigation or /Templates/Design/DesignName/Navigation


How the navigation XML expands and which nodes it includes


None, Path, All, Pathonly


Limits the navigation to items placed under the page with the ID specified


Any valid page id


Limits the navigation to items placed under the page with a specific navigation tag. It works like parentid setting,

but where parentid is a unique key, the parent tag can be on several pages in different

languages – and the value is language/website context sensitive.


A name from the parent tag field on a pages properties, navigation dialog.


Limits the navigation to items placed under the website with the ID specified


Any valid website id (these can be seen under the Websites module)


Specifies which items to include in the XML. If set to true, hidden navigation items are included, but not items where show in sitemap is not set. If set to false, hidden items are not included, but do not show in sitemap are included.


True or False