Customizing the breadcrumb

The larger your website gets, the more important it is to make use of Joomla!'s breadcrumb feature.

Getting ready

To start redefining your breadcrumb's style, open the template.css file for your template; use the rhuk_milkyway template for this demonstration. This means that your CSS file will be located in the templates\rhuk_milkyway\css directory of your Joomla! installation. If you visit a page other than the home page in your Joomla! website, you'll be able to see the breadcrumb.

As you can see, the rhuk_milkyway template defines the style for the breadcrumb in the template.css file.

span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}

The HTML that defines the breadcrumb for the Features page is as shown:

<div id="pathway">
<span class="breadcrumbs pathway">
<a href="http://example.com/" class="pathway">Home</a>
<img src=" /templates/rhuk_milkyway/images/arrow.png" alt="" /> Features...