Weebly Websites and Breadcrumbs Link Trails

A breadcrumb trail is a navigational tool used to display the path to the current web page.
It displays the route from a top level page to the current page a user/visitor is on.

Today I would like to demonstrate how I create breadcrumbs link trails in my Weebly websites. I have seen a few others try this but without complete success. I am indebted to Jack Woon's blog article on this subject and I use the Javascript code he used adding some refinements to his code and methodology.

This is the code I use in this website to setup Breadcrumbs.

STEP ONE

You can copy the code above by saving the weeblybreadcrumbs.js file below to your Weebly Code Editor Files directory accessible via: DESIGN > Edit HTML/CCS > Files

There are a few variations to this code available to those of us who are not experienced Javascript coders. For instance:

• <h4>...</h4> could be <h3>...</h3> if you want a larger font size.
• "You Are Here: " can be changed  or deleted.
• UpperCase can be changed to LowerCase - there are three places where this change can be made.
• <font color="#555555"> (towards the bottom of the above code - this controls the font of the page name you are on) can be changed to any color code you wish as long as it contrasts with your page content background.

COPY THIS .JS FILE

STEP TWO

Having loaded the .js file above, you need to add code to your HTML pages above your Files folder.

The secret to creating Weebly Breadcrumb Trails is to treat each top level menu link in conjunction with the sublinks above (or beside) it.  

With reference to this website www.valuewebsites.co.nz for instance, I have grouped 'Web Services' with the sublinks below beginning with 'Weebly Websites'. In this case I have used the same Page layout for all these links, 'short-header.html'

Just above the closing </body> tag I have inserted this script.
<script src="/files/theme/weeblybreadcrumbs.js"></script> 

The final piece of code that needs to be added is placed immediately above  the {content} code (usually white) on the html page.
<div topurl="/Web-Services.html" toptitle="Web Services" ></div>
So 'topurl' in this case is '/Web-Services.html' and the top level page's title 'toptitle' is 'Web Services'

STEP THREE

Now, this is where it all gets a little more complicated. Some Weebly users will need help with this. Each top level link, in my websites e.g. 'About Us', 'VW News', etc. needs to have a different Page Layout. If you want to use the same graphical design and page layout as 'short-header.html' for another top level menu link, you will need to copy the html code in that layout and create another page layout, e.g. 'short-header2.html'. I have done that for my 'About Us' page. I then changed the 'div' (2nd) red code above to:
<div topurl="/About-Us.html" toptitle="About Us" ></div>
while adding the 'script' (1st) code as is.

Furthermore, you may choose to have No Header for the sub link/s below (beside) a Top Level Link, as I have done for the pages below 'About Us'. Please do not use the 'no-header.html' Page Layout - this is needed for Store Products/Services if you need your website for eCommerce.

Copy the code from your existing 'no-header.html' page and create, 'no-header2.html' before adding in:
<div topurl="/About-Us.html" toptitle="About Us" ></div>
<script src="/files/theme/weeblybreadcrumbs.js"></script> 
as above.

And so on....

You will need to Publish your website to see your Breadcrumbs Trail - it does not appear when you are in Editing mode.

STEP FOUR

Three things to note:

1. You may choose not to have a breadcrumb trail on your Home page, or any other page that does not have menu sub-links. If you do have a 'Trail' on Home, you need to act in the same way as above because 'Home' is a top level menu link just like 'About Us' and 'Web Services' on this website.
   
2. If you have products for sale, your eCommerce 'Cart' is a 'no-header.html' page like the Product pages. Your 'Cart' breadcrumb trail 'Store' or 'equivalent' link may throw up a 404 error message. I have not figured how to get around this. Suggestions are welcome.
3. I have tried to offer a careful explanation of how to add breadcrumb trails to Weebly websites. Those of you unfamiliar with using html and javascript code may be encouraged to try implementing this breadcrumbs methodology. Don't waste too much time if your time is valuable. In most cases I can add this code to your Weebly website in less than an hour. You may choose to spend NZ$50 with me to have the code installed on your Weebly website.

POSTSCRIPT

Jack Woon also offers an alternative method which involves coding page by page. This is okay if there are say less than 15 pages in your website. Beyond that it becomes tedious and time consuming. As you develop your website it may also be frustrating to have to manually change or add code as you add new pages and/or change top level links, etc.
Alternative Method
Load the .js file as above to the 'Files' folder. 
Add the first code once at the bottom of one of your page footer elements:
<script src="/files/theme/weeblybreadcrumbs.js"></script> 
This code will automatically repeat on the footer of all pages.
Add the second code, adjusted for each of the top level menu links, to each web page, eg.:
<div topurl="/About-Us.html" toptitle="About Us" ></div>
For this alternative method top (2nd) code:

1. You can use the element Copy function to more quickly move the top level link code to the top of sub-menu pages;
   
2. You can add the code to the RH sidebar of any 'Blog' page - not top left;
   
3. You can add the code to your Store page, but you will not be able to place  it in Product pages nor in the Checkout Cart.

To view the results of coding using this alternative method visit our sister website Edit Your Webs

FINALLY

Please use the comments facility associated with this Post if you have questions or suggestions about this topic. 

May all your breadcrumbs be tasty ones!

Terry Alve
Value Websites