PVII Pop Menu Magic

User Guide Home :

Creating a PMM Breadcrumb Trail

Download the PMM Breadcrumb Builder add-on now


You can create a PMM Breadcrumb Trail on any page that contains a Pop Menu Magic system. For example, there is a breadcrumb trail at the top of this page. The breadcrumb trail is based on the page links in the Pop Menu Magic system on your page, and will work in conjunction with the default Current Marking system or any of the Advanced Current Marker options employed.

This tutorial will use an example folder structure loosely based on projectseven.com. You can follow along using your own site or you can download the Example Site. If you choose to download the example site, unzip the archive and define a new Dreamweaver site using the example site as the root.

Select the Insertion Point for the Breadcrumb Trail

The PMM Breadcrumb Trail can be inserted anywhere on your page, it will be added wherever your cursor is currently positioned. Placing the breadcrumb trail either at the top or at the bottom of the page are the usual deployment methods.

If your PMM system is deployed using Dreamweaver Templates, you should insert the breadcrumb trail on the template (.dwt) page, inside a locked region, so that it will be added to all pages based on the template.

-Position your cursor to set the insertion point for the breadcrumb trail. In our example page, position your cursor at the top of the page, just to the left of the <h2> heading.

Set the  Insertion Point

Note: Be sure that your cursor is not in the middle of an existing element or the breadcrumb will be inserted at that position - splitting the original element into two surrounding elements.

The Breadcrumb will be inserted directly above your insertion point, that is, ahead of the element that your cursor is currently inside of. Un the above scenario, then, your breadcrumb trail would be inserted above the <h2> tag.

Opening the Breadcrumb Builder

-Choose Commands > Studio VII > Pop Menu Magic by PVII > Breadcrumb Trail...

Note: The Breadcrumb Trail option will be unavailable (grayed out) if there is no Pop Menu Magic html markup on the page.

Select BreadCrumb Trail from Commands Menu

The Breadcrumb Trail Builder interface will open.

The BreadCrumb Builder Interface

Intro Text (Optional)

This field allows you to specify any text that you wish to display as an introduction to the breadcrumb trail. The intro text will be placed to the left of the trail. For example, you may want to have the words "You Are Here:" placed to the left of the breadcrumb trail to provide an additional cue to the user. The default for this box is nothing (empty). Any text you enter here will be used as the Intro Text.

-For this example we will not be using this option. Leave it blank.

Root Link Text

Every breadcrumb trail should have a consistent root link that usually points to the Home page of your site. This also serves as the visible placeholder link for the trail.

This box allows you to specify the text for the base (or home) link. The box is pre-set to the word "Home", but you can enter anything you like - although "Home" is usually what most users will understand. You cannot leave this box blank - if you do, the system will automatically enter "Home" in order to assure that a valid root link is built.

-Leave this box unchanged. For this example we will use the default "Home" text.

Root Link URL

Use the Browse button to navigate to, and select, the Home (root) page for your site. You can also enter the URL manually.

-Click the Browse button and navigate to the root page of your site. In the example site, select index.htm.

Browse to the Root Page of Your Site

-Click the OK button to close the Browse dialog. The path to the selected file will appear in the Root Link URL box.

The Root Link box

Link Separator

The Link Separator is the symbol that is used between each link in the breadcrumb trail. You can enter anything you like into this box or select from one of the pre-defined separators in the listing.

-Select the single colon (:) in the Link Separator dropdown listing.

Slect the Link Seperator

Note: The system will automatically use a "greater than" (>) symbol if no entry or selection is made.


Wrap Separator With Space

If this option is checked, the system will automatically add a single space to both sides of the separator symbol in order to provide some visual space and "breathing room" between the links in the breadcrumb trail.

-Leave this box checked, we want a bit of space between the separator and the links.

Use Root Link as Placeholder Only

When this option is checked, the root link (Home) will be used only as an html placeholder and will not be visible on the actual rendered page. Use this option when you do not wish to have a root link visible. The breadcrumb trail will consist only of the links in the current marker hierarchy of the Pop Menu Magic system on the page.

-Leave this box unchecked, we want to use the Root Link feature.

Create the Breadcrumb

Now that all of the interface options are selected we can go ahead and create the breadcrumb trail.

-Click the OK button to create the breadcrumb trail. The breadcrumb placeholder markup will be added to your page at the cursor insertion point.

In Design View you will see the placeholder Root Link text.

The placeholder root link text

In Code View, you will see the markup for the breadcrumb <div> and the root link placeholder link.

Finishing Up

-Save the page to preserve the changes. If you added this to a template page be sure to allow the template to update changes to all template-based pages.

You can preview and test the page now.

Note: to preview this feature, you will need to save your page and open it directly in the browser. Dreamweaver's Preview in Browser feature will not work correctly because it uses special temporary files instead of the actual url of the page.

If you are on the index (root) page then all you will see is the Home text. If you are on a page that is deeper in the site, the breadcrumb trail will reflect the complete hierarchy of the current page as it appears in the Pop Menu Magic menu.

Note: The Breadcrumb system will use the link text that appears in the current marker trail of the PMM system. If the current page does not appear in the menu then its page title text will be used instead.

Next: Home