Pin Me

Creating Breadcrumbs in Dreamweaver

written by: muydwriter•edited by: Linda Richter•updated: 6/16/2010

One of the best ways to construct your site is by utilizing the Dreamweaver Breadcrumbs extension. It will make your website look more professional. Just follow these easy tips!

  • slide 1 of 2

    Creating Breadcrumbs in Dreamweaver

    What are breadcrumbs and how are they helpful exactly?

    Breadcrumbs are navigation elements on the page that show the structure of the site's folders in relation to what you have visited and how they can lead you back to the home page. They easily allow you to retrace your steps just like in the old fairy tale of Hansel and Gretel. You can approach Breadcrumb creations manually or dynamically. If you have a lot of static pages, you may be better off organizing your files into a directory structure and then let a Dreamweaver extension do all the work for you.

    One such Dreamweaver extension is MX Breadcrumbs. It will create the directory index, displaying the database information in a hierarchical manner, and the Breadcrumbs on a web page. For a more automated approach that involves a fair amount of programming, but will save you a lot of time and effort in the long run, use dynamic pages. These are pages that are generated from the database entries, which you can easily categorize and use to create the Breadcrumbs.

    Let's discuss a free Breadcrumbs extension using Dreamweaver for creating automatic breadcrumbs, namely the Kaosweaver Breadcrumbs Extension. It works with Dreamweaver MX and 8 versions. This extension requires that a consistently named file be in each folder to serve as the default page; usually this is an index.html or a default.html. This also means that the extension, either .htm or .html, must be the same in each folder.

    Steps to Follow:

    To create Dreamweaver Breadcrumbs, note that you need Javascript to make this work. You can get the free version from the website: http://www.kaosweaver.com/. Once that’s done, you can use the extension to insert Javascript code that will automatically create the Breadcrumbs based on the folder and directory names that you prepared beforehand. Once you've done that, you can start by opening a webpage and place your cursor in the spot where you would like your Breadcrumbs to appear.

    crumbs 1  Click on the Commands pull-down menu, click Kaosweaver.com, and then click Breadcrumbs. A window will next pop up asking about the site and giving you several options to customize your breadcrumbs.

    After you’ve entered the information and customized your Breadcrumbs, click ‘OK’ and a snippet of code will be displayed. It will look similar to this:

    <script>breadCrumbs("www.uri.edu/ce/wq",">","index.htm","bread1","bread2","bread1","0");</script>

    This is the code that you will place into your source code exactly in the space where you would like your Breadcrumbs to show up. There will also be some script added to the head tag of your source code that will look something like this:

    <script> function breadCrumbs(base,delStr,defp,cStyle,tStyle,dStyle,nl) { // by Paul Davis - http://www.kaosweaver.com loc=window.location.toString();subs=loc.substr(loc.indexOf(base)+base.length+1).split("/"); document.write('<a href="'+getLoc(subs.length-1)+defp+'" class="'+cStyle+'">Home</a> '+'<span class="'+dStyle+'">'+delStr+'</span> '); a=(loc.indexOf(defp)==-1)?1:2;for (i=0;i<(subs.length-a);i++) { subs[i]=makeCaps(unescape(subs[i])); document.write('<a href="'+getLoc(subs.length-i-2)+defp+'" class="'+cStyle+'">'+subs[i]+'</a> '+'<span class="'+dStyle+'">'+delStr+'</span> ');} if (nl==1) document.write("<br>");document.write('<span>'+document.title+'</span>'); } function makeCaps(a) { g=a.split(' ');for (l=0;l<g.length;l++) g[l]=g[l].toUpperCase().slice(0,1)+g[l].slice(1); return g.join(" "); } function getLoc(c) { var d="";if (c>0) for (k=0;k<c;k++) d=d+"../"; return d; } </script>

    Don’t be confused when you do not see the actual Breadcrumbs in the design preview window of Dreamweaver--that's just normal. What you should see is some text that says:

    {Kaosweaver Breadcrumbs Trail}.

    If the Breadcrumbs Javascript is interfering with any other functions on your site that require Javascript (i.e., pull-down menus), I would recommend placing the Breadcrumbs in a text page and then copying and pasting it manually into your web pages.

    There are more great things that you can do with Dreamweaver. Here are some great links to read more about it:

    How to Edit an Existing Site with Dreamweaver and How to Edit Joomla Templates in Dreamweaver: A Beginner's Tutorial

  • slide 2 of 2

    Image Credits

    Screenshots from:

    Macromedia Dreamweaver 8

    Kaosweaver Breadcrumbs