How to add a breadcrumb trail to your web pages: - XSitePro Website Design

Home Previous  Next


Brought to you by XSitePro Website Design Software

professional website design made easy      


To load the breadcrumb settings, first click on the Other tab, and then the Breadcrumb Trail button.





On clicking the button above, the Breadcrumb Trail settings window will appear. In the lower half of the screen are all the settings for you to edit, and in the upper part of the screen is a preview window so that you can see the effect that the changes you make will have on your site.





There are a number of settings on this screen that we can adjust to make our breadcrumb appear exactly how we would like.



Breadcrumb Trail Positioning – To include a breadcrumb trail on a specific panel in your Web pages, put a check mark in one or more of the following options:


On the Main Panel Header

On the Main Panel Footer

On the Info Bar


If any of the above panels are not enabled on your site at this time, the respective option(s) above will be grayed out.


Once you put the check in the appropriate box you will see the default breadcrumb trail appear in the right place on the preview panel at the top of the window.



Link Text


You have four options that you can set in this section of the window:


The first two options have a straight choice between them:



Use Page Titles – Selecting this option will cause the page titles to be used within the breadcrumb trail to represent each page.


Alternatively, you can select the option below:



Use Menu Text – If you select this option, the text that you specified should be used in the navigation menus (for the page in question) will also be used in the breadcrumb trail.



With this initial choice made, you can now set the following:


Non-link Text – This refers to the text in between page names. For example, in the below picture the dividing text is displayed in a red font:





To change the non-link text, simply type the preferred text into the text-box provided. Popular symbols for this kind of separator include the following characters:


>  (Angle bracket)

:  (Colon)

::  (Double Colon)

-  (Dash)

,  (Comma)


You can also include a space before and/or after the symbol. For example:


Home>Products  (without spaces)

Home > Products  (space before and after the > symbol)



Preceding Text – The text you enter in the box in the bottom-left corner of the window will appear ahead of any breadcrumb links. Suitable examples, for this value, include:


You are here:



Where am I?:

And so on



Font – Select the font and font size you would like for the breadcrumb trail. Put a check in the bold and/or underline if you would like the trail to be bold or underlined.





There are four color settings you need to set:


Normal – This is how the link will normally look on your page.


Hover – This setting is for how the breadcrumb link text will look when someone has their mouse pointer ‘hovering’ over the top of it.


Visited – This setting determines how the link text will look if the visitor has already visited that link.


Non-Link text – This is the color of the non-link text, between each breadcrumb link. This can be a neat way of tying your breadcrumb into your overall site design – perhaps picking up on a key color in the header graphic, for example, for the non-link text.



Other Settings


Alignment – Choose whether you want the breadcrumb trail to be aligned to the left or to the right. In most cases you will choose to have it on the left, but you can have it centered or right justified if you wish.


Include Link on Last Breadcrumb – Check this option if you would like to make the last entry in the breadcrumb trail (to the current Web page) into a clickable link. Normally you would not (i.e. there’s little benefit to having a link to the page you’re currently on), but the option is available should you want to use it.


Show on Home Page – You may feel that (since the Home Page is the starting point in the vast majority of Breadcrumb navigation trails) it is not necessary to have the breadcrumb trail on the home-page. If so, ensure this check-box is unchecked. To enable the breadcrumb on the home page, check the check-box.



When you have finished adjusting the settings for your breadcrumb trail, click the button_breadcrumb_ok button and your breadcrumb trail settings will be applied to all of your existing pages and any new pages you create.


You can see how it will look by clicking on the button_application_preview button at any time.

Home  Previous  Next