The “breadcrumb trail” is a number of links showing the path to the actual location of the store the visitor is in. It is considered as a very useful navigation instrument, so that people don’t get lost in your pages structure and easily jump one or more steps back. Mini template system include a completely customizable module for this
Install the breadcrumb trail
First step is to install the breadcrumb trail. That’s an easy process, all you have to do is to go to the mini template system area of your administration panel, click on “elements” and then click the “install” button in the top right corner of the page. Choose “breadcrumb” and then click “install” again.
After the breadcrumb trail is correctly installed, you can start to configure it. Please note that at this moment it is already visible on your website
Configure the breadcrumb trail
Configuring the breadcrumb trail mean to make decisions about the content, about the layout and about the various options for text size and color, backgrounds borders etc.
- breadcrumb – general settings
- breadcrumb – content settings
- breadcrumb – container layout
- breadcrumb – text settings
- breadcrumb – separator symbol settings
- breadcrumb – button style
To start with the breadcrumb configuration please press on “edit” on the right hand panel
General Settings
Following settings are available:
- Enable the breadcrumb: You can enable or disable the module. Disabling mean that it won’t display anywhere, any settings you did will be saved
- General display: “yes” mean that the module will display on all pages unless there is an other setting via page profiles. “no” mean that the module won’t display anywhere unless there is a setting in page profiles.
- Module position: There are 4 possible positions available: (1) Full width on top or bottom of the page, or within the content area on top or bottom
- Sort order: Set the sort order of the module on the screen in relation to other modules of the same group. If, for example, you set the module to display on top and full width, the sort order will be compared to the sort order of any other modules with the same placement, for example a banner that belong to the same group
Please note, that you can set the sort order, the position or enable/disable the module individually for any page, product or category you want using page profiles
Content settings
Following settings are available for the breadcrumb content:
- Display link to “top”: The link to “top” is the link to the root of your installation. In case you have your store installed in the root, then the link “top” and the next one “catalog” will link to the same location. Here you can enable or disable that link
- Display products name / products model: osCommerce display by default the products model in the breadcrumb trail. Here you can select if you want the products name or products model
Container layout
With “container” we mean the whole block that contains the breadcrumb trail. You can imagine this as a rectangle that you can configure in following ways:
- Respect margins: Setting this to “yes” the container will adjust within the content margins. Setting it to “no” the container will occupy the full available width
- Vertical container padding: Set the top and bottom padding of the breadcrumb container in pixels
- Horizontal container padding: Set the left and right padding of the breadcrumb container in pixels
- Container background: Set the container background color either by using colorpicker or by typing in the hex number (without the # prefix)
- Container border: You can add a border, either to one side only or all around
- Container border thickness: The border thickness in pixels
- Container border thickness: Set the border color either by using colorpicker or by typing in the hex number (without the # prefix)
Text settings
Following settings are available:
- Text size: Set the size of the breadcrumb links in pixels
- Text color: Set the links color either by using colorpicker or by typing in the hex number (without the # prefix)
- Text hover color: The links color on hover state
- Text color active link: This is the color of the last breadcrumb link – the page the visitor is on
- Text shadow: You can add a text shadow effect to the breadcrumb links if you want to expose them.
Separator symbol settings
This is the symbol used to separate links from each other. Following settings are available:
- Separator symbol: Here you can enter the character you want to use as a separator. This can be any character you like, but you will want to add something like an arrow, double arrow or dot. If you don’t want to use any symbol, you can leave the field empty
- Separator symbol color: Set the separator color either by using colorpicker or by typing in the hex number (without the # prefix)
- Separator symbol background color: The background color of the separator symbol, if you want to use any
- Separator symbol size: The text size of the separator. This has not to be the same as the text size for the links, you can set it either higher or lower and create nice effects
- Separator symbol padding: The left and right padding of the separator. You will find this useful in case you use a background color
Button style
Additional to the above settings, you have also the option to give a “button style” to your breadcrumb links. In this case we would recommend, not to use any separator symbol. You can imagine that each link is an independent rectangular. Following settings are available in order to create the effect:
- Vertical text padding: Top and bottom padding of the breadcrumb text
- Horizontal text padding: Left and Right padding of the breadcrumb text.This 2 settings will set the “dimensions” of your button effect
- Text background color: Set the separator color either by using colorpicker or by typing in the hex number (without the # prefix). The color you set here, will fill the complete available space for each link
- Text hover background color: The background color upon hover
- Text background color active link: This is the background color for the link the visitor is on, this is the last link in the trail
- Text border: Here you can add a border around each link, to complete the “button” effect
- Text border thickness: The border thickness in pixels
- Text border color: The border color.