Adding a Breadcrumb Trail - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      


A breadcrumb trail is a handy navigation feature which, when activated on your site, gives visitors a visual reference to their present location on your site. Parts of the navigation path displayed are clickable, to make it easy for the visitor to retrace their steps back to their starting point.


To add a breadcrumb trail to your web page, click the 'Breadcrumb Trail' button (as shown below), located within the 'Other' tab, when editing any website.





This will load up the 'Breadcrumb Trail' window, as shown below. To customize the breadcrumb trail (once activated) use the controls provided below.





Include Breadcrumb Trail - Select the checkbox(es) for the area(s) where you would like your breadcrumb trail to be added within your website. You can have any or all of the following areas contain a breadcrumb trail:


On the Main Panel Header

On the Main Panel Footer

On the Info Bar



Link Text - This is the text that will make up the breadcrumb trail itself. Select your preferred option by clicking the one of the two radio buttons provided. The trail can use one of the following as link text:


Use Page Titles - The headings of the actual web pages themselves will be used to compile the breadcrumb trail.

Use Menu Text - The headings of the navigation menus on your website (which may not necessarily match your actual page titles, depending on how you build and customized your website) will be used to compile the breadcrumb trail.


The separator is a symbol that will be used to split up the links in your breadcrumb trail. By default, the '>' symbol is used, but any character you wish can be entered into this text box.


Text to go before breadcrumb - Any description text that you wish to add can be done so in the text box provided here. The text you add here will appear before the breadcrumb trail itself on your final published website.



Font - Set the font name and size using the drop-down selectors provided. You can also set the text to be bold and/or underline; just select the checkboxes provided to suit your preferences.



Colors - Set the colors for your breadcrumb trail, depending on its status. The following is a breakdown of the colors:


Normal - This color will be used when links contained within the breadcrumb trail have not yet been visited.

Hover - This color will be used when the visitor moves their cursor over links contained within the breadcrumb trail itself.

Visited - This color will be used when links contained within the breadcrumb trail have been visited.

Non-link text - This color will be used for any text within the breadcrumb trail that does not link to other web pages in your website.



Other - set the alignment of the text in your breadcrumb trail (left, center or right), using the drop-down selector provided. Select the checkboxes here if you wish for those final customization features to be added to your breadcrumb trail. The final customization features are:


Include link on last breadcrumb

Show on Home Page



When you are happy with your breadcrumb trail settings, click OK to add the breadcrumb trail to your website.

Home  Previous  Next