DreamWeaver Toolbar: Expanding Navigation Block(s)

This module allows the owner of the website to build and manage a block of links as part of their websites overall navigation scheme.  Each navigation block (minimum 1, maximum unlimited) will contribute to the websites navigation.  The expanding block differs from a standard block because it allows for sub-items or pages to be created.  For more information please see the tutorial on dynamic navigation.


  • Add, remove, rename links.
  • Links can lead to new pages, existing pages, external URLs, or uploaded files.
  • Add sub-links much like a hierarchy menu.
  • No limit to the number of sub links.


  1. Open an HTML file in DreamWeaver.
  2. Place the cursor at the insertion point (in code view or design view).
  3. Go to the Zencil toolbar and click the  icon.
  4. Use the wizard to set up the style and colors etc.


  • You can customize the menu items further by editing the css style code.  This code is automatically placed within the <head> tags of your html.
  • You may also choose to move the css style code into an attached style sheet so that it can be re-used on other html page templates.
  • If you have multiple navigation systems within your page design, make sure you are familiar with our tutorial on dynamic navigation.

Code Sample

  • The <style> code goes within the <head> tags or as part of an attached css file.
  • The <zencil> tags go anywhere within the html body.
  • <zencil> and <zencil:hidden> tags may be used interchangeably.
<style type="text/css">
#menubar1 {
  font-family:Arial, Helvetica, sans-serif;
#menubar1 a {
  text-decoration: none;
  color: #6666FF;
  padding: 5px;
#menubar1 a:hover {
  color: #9B9B9B;
#menubar1 ul {
  margin-left: 0;
  padding-left: 0px;
  line-height: 29px;
  list-style: none inside;
#menubar1 li ul {
  padding-left: 15px;
  font-weight: lighter;
  font-size: 0.8em;
#menubar1 li {
  white-space: nowrap;
#menubar1-root {
  margin: 0px;
  padding: 0px;
  background-color: #DAE0D2;
  border: 1px solid ;
  font-size: 1em;
  width: 250px;
<zencil:hidden module="menubar" name="menubar1" style="expanding">
  <div id='menubar1'>
    <ul class='level1 horizontal' id='menubar1-root'>
      <li id='level1-1' class='level1'><a href='../index.html'>Home</a></li>
      <li id='level1-2' class='level1'><a href='../002_TestPage/index.html'>Section2</a></li>
      <li id='level1-3' class='level1'><a href='../003_DreamWeaverTo/index.html'>Section3</a>
          <ul id='level1-3' class='level2 '>
            <li id='level2-1' class='level2'><a href='../007_newlink/index.html'>Section3Page1</a></li>
            <li id='level2-2' class='level2'><a href='../003_DreamWeaverTo/007_CodeSnippetsS.html'>Section3page2</a></li>
            <li id='level2-3' class='level2'><a href='../004_ZencilDreamWe/008_DreamWeaverTo.html'>Section3subsection4</a>
                <ul id='level2-3' class='level3'>
                  <li id='level3-1' class='level3'><a href='../004_ZencilDreamWe/009_DreamWeaverTo.html'>Section4page1</a></li>
                  <li id='level3-2' class='level3'><a href='../004_ZencilDreamWe/010_DreamWeaverTo.html'>Section4page2</a></li>
    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada