The larger your website gets, the more important it is to make use of Joomla!'s breadcrumb feature.
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...