HTML Toolkit: Breadcrumb Builder

Installing the Breadcrumb Builder

Extension installer files come in 2 formats: MXP and ZXP.

MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6.

ZXP is supported by versions CS5.5 and higher.

To install this product,

  • Open your Extension Manager
  • Click the Install icon or link
  • Browse to where you unzipped the installer file

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud:

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

Overview

The Breadcrumb Builder provides the ability to automatically generate a Breadcrumb trail on any page that is using a typical list-based (<ul>) navigation system. The Breadcrumb trail can be placed anywhere on your page and can be easily modified at any time. A typical breadcrumb trail will present a linear path to the current page in a hierarchical fashion, with active links to each main site area.

The Breadrumb Builder includes two user interfaces:

  • Breadcrumb Builder -the main interface that is used to create or modify the breadcrumb.
  • Breadcrumb Marker -used for pages that do not have a corresponding link in your main navigation.

How it Works

The Breadcrumb Builder works in conjunction with the navigation system on the page and uses the menu hierarchy to create the breadcrumb trail. The trail will reflect the current page and all of its parent links in the menu - assuring that the menu and the breadcrumb trail will always be synchronized.

The Breadcrumb builder can be used with any of our menu systems as well as any other menu that is based on unordered list markup (<ul> <li>).

The PVII Difference

PVII HTML Toolkits and Page Builders are made to allow Dreamweaver users to leverage the power of modern CSS and HTML methods without having to learn a new application, and without having to know code. Whether you are are a web design novice, or a master of CSS, PVII tools make your life easier and your time more productive. No other Dreamweaver extensions or plugins, and no feature that comes with Dreamweaver, can even compare.

Accessing the Breadcrumb Builder UI

Installing the Breadcrumb Builder creates a new category on your Insert Bar/Panel called HTML Toolkits (the last category in the screen captures below):

Insert Bar

The HTML Toolkit tab's icons depend on which toolkits you have installed. The ninth icon in the above image opens the Breadcrumb Builder UI. The other icons open the Responsive Images Toolkit, the Links Toolkit, and Page Helpers Toolkit UIs.

Insert Panel

Insert Menu

Alternatively, you can use the traditional Insert Menu. Choose:

Insert > PVII HTML Toolkits > Breadcrumb Builder

The interface will open...

The Breadcrumb Builder Interface

Managing the User Interface Items

Mode

There are 2 modes: Insert Breadcrumb and Modify Mode

Note: One of the things that makes PVII Extensions unique is the ability to not just insert code, but to modify the code (and options) you insert as many times as you need to. In that sense, we add a level of automation to Dreamweaver that it ordinarily does not have.

The Modify Mode Interface

To access the Modify UI, select the relevant Breadcrumb instance on your page and use the Insert Bar or Insert Menu, just as you did to open the UI initially. The interface will recognize that you are inside a Breadcrumb instance and open in Modify mode.

Source Nav ID

This will list all of the ID'd nav systems on your page. Select the id of the navigation system that will provide the source for the links and text in your Breadcrumb trail.

If your nav system does not show in this listing it's probably because the nav <ul> or containing <div> tag does not have an ID assigned.

If your menu does not already have an ID assigned you can assign your own:

In Code View, the menu would have a root <ul> tag:

<ul>

Assign an ID, any name will do, like this:

<ul id="myNav">

Now, in Design View, click in the area of the page you you want the Breadcrumb to appear and open the Breadcrumb interface. You will now see the menu listed.

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.

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. If you do not want to have the root link visble in the rendered Breacrumb then place a checkmark in the Use Root Link as Placeholder Only option.

Root Link URL / Browse...

Enter the path to the Home (root) page for this Breadcrumb or use the Browse button to open the Select File to Link dialog box. The system will automatically supply a "#" link placeholder when new Breadcrumbs are created, which you should change to an actual page link before publishing.

The Home (root) page is usually the root page of your web site.

Options

These settings are applied to the current Breadcrumb only. Other Breadcrumbs on the same page can have different options.

Alignment

The Breadcrumb can be aligned in one of three ways, select one of these methods in the Drop-Down listing:

  • Left Aligned
  • Centered
  • Right Aligned

Separator Type

The Separator is the symbol that is used between each link in the breadcrumb trail. Select one of the supplied Separator choices in the dropdown list.

  • None
  • Right Arrow
  • Dash
  • Pipe
  • Colon
  • Double Colon
  • Arrow -Thick
  • Arrow -Thin
  • Arrow -Open

Text Source when page is not linked in Menu

The Breadcrumb system will normally use the actual text of the menu links to populate each item the Breadcrumb trail. Of course, there are occasions when the current page is not represented as an actual link in the menu. In these cases you can specify what the Breadcrumb system should use for the text of the current page item:

  • No Text -Choose this option if you do not want to display any Breadcrumb text for the current page.
  • first <a> tag on page -The system will look for the first occurrence of a link tag (<a>) on the page and use its content to populate the breadcrumb item.
  • first <h1> tag on page -The system will look for the first occurrence of a heading 1 tag (<h1>) on the page and use its content to populate the breadcrumb item.
  • first <h2> tag on page -The system will look for the first occurrence of a heading 2 tag (<h2>) on the page and use its content to populate the breadcrumb item.
  • first <h3> tag on page -The system will look for the first occurrence of a heading 3 tag (<a>) on the page and use its content to populate the breadcrumb item.
  • first <p> tag on page -The system will look for the first occurrence of a paragraph tag (<p>) on the page and use its content to populate the breadcrumb item.
  • <title> tag -This is the default. The system will use the text contained in the title tag (<title>) of the page.

When Matching Include:

  • Url Parameters -Allow the Breadcrumb system to include any url parameters when looking for a matching link in the menu. This is especially useful for dynamically driven pages.
  • Page Anchors -Allow the system to include the page anchor in the URL when looking for a matching link in the menu.

Use Root Link as Placeholder Only

When this option is checked, the root link (Home) will be used only as an html markup 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 hierarchy of the menu system on the page.

Animation

Sets a subtle transition from default to hover states.

Hide Bread Crumb in Mobile Phone

Check this box if you wish to have the Breadcrumb hidden for small screen mobile devices, such as mobile phones.

Show Same Page and Placeholders as Null Link

Any same page links or placeholder links (null links with # or javascript: void()) will be rendered as links so they appear in the same styling as regular links. When clicked these will have no action. Uncheck this box if you wish to have the link types rendered as plain text.

User Class

Advanced CSS Authors can set one or more custom classes on the link, enabling them to set attributes and behaviors beyond the available options.

Note: Do not enter a leading period in the User Class box. If you are entering multiple classes, separate each one with a space. Do not use the characters p7 or bcb in your user class names.

Styling

The following options allow you to quickly style the look of your menu. The color palette is the same one used for our other menu building and page building tools.

Text Color

Set Text Color for the default and visited state of the links.

Hover Color

Set Text Color for the default and visited state of the links.

Text Decoration

Set the decoration for the default and visited state of the links:

  • None
  • Solid Line
  • Dotted Line

Text Decoration -Hover

Set the decoration for the hover state of the links:

  • None
  • Solid Line
  • Dotted Line

Breadcrumb Marker Utility

There are occasions when the current page is not represented as an actual link in the menu. This system will use the selected 'Text Source’ method to display text for each respective page in the Breadcrumb trail, but not for any other items if there isn’t a matching link shown in the menu hierarchy.

The Breadcrumb Marker Utility allows you to quickly set the link in the menu hierarchy that you wish to use to supply the Breadcrumb trail.

How to Use:

Open the page that is not represented in the site's menu, and then open the Breadcrumb Marker interface (use the same technique as described above to open the user interface).

Mode

Displays the current operational Mode for the user interface: either Create or Modify.

Breadcrumb ID

Select the ID of the Breadcrumb on this page that you wish to affect. usually there will only be one and that will be automatically selected.

Menu Links

All of the links in the menu are listed here. Simply select the link that you wish to use as a marker. The Breadcrumb trail will be built by using this selected link and then the hierarchy of the menu to supply the trail.

Command Buttons

OK

Commit the options you have set in your UI session to the page and close the UI.

Remove

Click this button to remove the selected Breadcrumb. If this is the only Breadcrumb on your page, the links to the Breadcrumb CSS and script files will also be removed.

Cancel

Discard the options you have set in your UI session and close the UI. Nothing on the page will be changed.

Help

Load this User Guide in your default browser.

Note: Requires a live Internet connection.

Support Options

Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.

Support Forum

PVII maintains a Web Forum community. Go Direct to the Web Forum

E-Mail and Phone Support

E-Mail: support@projectseven.com

Phone: (336) 374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.

©2019 Project Seven Development

Menu