Adding a primary navigation to your template

In this guide we'll take you through adding a primary (listbased) navigation menu to a custom template.

Setting up the custom template

Starting with your custom template, find the area where you’d like your navigation to be rendered. In our example, we'd like to add the dynamic navigation items inside the <nav> tag, as seen below

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Let's navigate</title> </head> <body> <header> <h1>Here's a header</h1> <nav id="nav-desktop">  </nav> </header> <main> </main> <footer>Company info</footer> </body> </html>

Adding needed code for the navigation

Next we need to add the dwnavigation class to a <ul>-element, in order for Dynamicweb to render our navigation.

The above code will output a unorderered list (UL) based navigation with node items from 1st to 3rd level. More options are available (for a complete list - see here).

Now, our finished template (w. navigation) should look like this:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Let's navigate</title> </head> <body> <header> <h1>Here's a header</h1> <nav id="nav-desktop"> <ul class="dwnavigation" id="primarynavigation" data-settings="startlevel:1;endlevel:3;template:LICLean.xslt;"></ul> </nav> </header> <main> </main> <footer>Company info</footer> </body> </html>

Remember: When using the dwnavigation class on a tag, all content inside that tag is overwritten by Dynamicweb.