DreamWeaver Toolbar: Breadcrumb

Breadcrumbs are useful in helping visitors navigate large websites.  Our crumby system reads the page location from the dynamic navigation scheme and prints it to the screen as a string of links — much like a folder hierarchy.


  • Displays one thread of the website's tree stucture leading to the current page.
  • Allows the visitor to move in and out of topics easily.


  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 breadcrumb icon.


It is considered to be a 'best practice' to include a breadcrumb system on websites with a large number of pages which are organized into topics and sub-topics.

Code Sample

  • The style code goes within the <head> tags or in any attached style sheet file.
  • The <zencil> tag "character" attribute is used to place a character between the links.  The default character below is » .
<style type="text/css">
#menubar1.breadcrumb a{
  /*breadcrumb link style*/
 #menubar1.breadcrumb a:hover{
  /*mouse over style*/
<zencil module="menubar" name="menubar1" style="breadcrumb" character="&raquo;" >
    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada