Navigation

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:

XSLT-Template

Used for

Render style

LIClean.xslt

Primary navigation menu

 

Horizontal

LiCleanBootstrapDropdown.xslt

Primary navigation menu

 

Horizontal

With dropdown items

(Uses Bootstrap v3)

LiCleanOffsetmenu.xslt

Primary navigation menu (mobile/off-canvas)

 

Vertical

Breadcrumb.xslt

Breadcrumb / path

 

Horizontal

LeftNavigationEcom.xslt

Ecommerce (product) navigation

 

Left, vertical

TopNavigationEcom.xslt

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:

Property

Description

Default value

Possible values

startlevel

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

1

1-99

endlevel

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

99

1-99

template

Name of XSLT template used for parsing the navigation XML

LIClean.xslt

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

expandmode

How the navigation XML expands and which nodes it includes

Path

None, Path, All, Pathonly

parentid

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

0

Any valid page id

parenttag

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.

areaid

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

0

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

sitemapmode

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.

False

True or False

 

 

Database

There is no database-specific information available for this topic.