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

Under Implementing you can read more about the default XSLT-templates.

Let's get practical. We'll talk about adding a navigation to a page, as well as the settings and common XSLT-templates available.

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.

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:

As stated in Basic Concepts, navigation templates output <ul> based navigations – see table below for the variations.

By default Dynamicweb does not ship with these templates – but they can be easily acquired through the Dynamicweb wraps (see downloads).

• Adding a primary navigation to your template

There is no developing specific information for this subject.

There is no database specific information for this subject.

There is no integration specific information for this subject.