pageSUMMARY

Why to use breadcrumbs links and how to style them.

Create Breadcrumb Links by Nick Beresford Davies

Leave a trail so your visitors don't get lost

Breadcrumb links are so-called because they're the digital equivalent of leaving a trail of breadcrumbs as you delve deeper into a website. They’re useful for (at least) a couple of reasons:

  • Firstly, search engines like them because they help them to determine the relevance of a page and its related categories.
  • Secondly, these links help a user to determine at a glance exactly where they are in a website, and give them the opportunity to go up a level or two by clicking on the ‘parent’ link. They’re most useful on large, complex sites.

To create the breadcrumbs, we need to place the links within an appropriately positioned DIV tag. We will ‘float’ the DIV right and then specify exactly how many pixels from the right and top edges of the header DIV tag the breadcrumb DIV will be positioned.

These links will also take on a different appearance to the global a: links we just created. This is how we do it:

Create the breadcrumb trail container DIV

Make sure that you are working in Split View. Click in the Header DIV and make sure the cursor is positioned within that DIV tag in the Code pane.

In the Insert palette, click Insert DIV Tag.

At the bottom of the dialogue box that opens, click “New CSS Rule”.

In the New CSS Rule Pane:

Selector Type: ID
Selector Name: breadcrumb-trail                 
Rule Definition: (select your existing style sheet from the menu)

In the CSS Rule Definition Pane:

Under Type
Font-family: Trebuchet MS, Arial, Helvetica, sans-serif
Font-size: 1.1 em
Font-weight: normal
Color: #ccff99 (light green)

These Type settings make sure that the typeface appears as Trebuchet (or one of the others listed in the absence of the preferred font) in approximately 11 point size, is not bold (but normal) and is colored light green.

Under Block
Display: inline

This Block setting keeps Internet Explorer 6 happy by overriding the double margin bug.

Under Box
Float: right
Margin-top: 70 pixels (make sure that ‘Same for all’ is unchecked).
Margin-right: 60 pixels

These Box settings position the DIV tag over to the right with a margin of 70 pixels from the top of the Header DIV, and 60 pixels from the right.

Once done, a box will appear in the header containing the text “Content for id "breadcrumb-trail" Goes Here” (figure 1).

Create breadcrumb links

Figure 1

Define the appearance of Breadcrumb links

Because we don’t want links in the breadcrumb trail to behave in the same way as global link styles, we need to create ‘pseudo class’ link styles that only apply to text that appears in the ‘breadcrumb-trail’ DIV. To achieve this we need to do the following.

In the New CSS Rule Pane:

Selector Type: Compound
Selector Name: breadcrumb-trail a:link
Rule Definition: (select your existing style sheet from the menu)

In the CSS Rule Definition Pane:

Under Type
Color: #ccff99

These Type settings ensure the link text retains the same light green color of other text in the DIV tag, and prevents it from inheriting the global link attributes.

The same procedure is carried out for the a:visited style, ensuring that after the link has been clicked/visited, the color doesn’t change to the default purple (or whatever color has been selected for global visited links):

In the New CSS Rule Pane:

Selector Type: Compound
Selector Name: breadcrumb-trail a:visited
Rule Definition: (select your existing style sheet from the menu)

In the CSS Rule Definition Pane:

Under Type
Color: #ccff99

Finally, the a:hoverpseudo class’ is also applied to the DIV tag in the same way, making the link change to white when the mouse hovers over it:

In the New CSS Rule Pane:

Selector Type: Compound
Selector Name: breadcrumb-trail a:hover
Rule Definition: (select your existing style sheet from the menu)

In the CSS Rule Definition Pane:

Under Type
Color: #FFF

Test the appearance of Breadcrumb links

To test the visual functionality of the link styles, replace the text in the DIV tag with the following: “home > link”. If working in ‘design’ mode, the ‘greater than’ symbol should automatically code itself as is HTML equivalent in the ‘code’ pane:

>

Now select the work ‘link’ in the design pane, and type a # symbol into the Properties Link text field. Press return, and the link should now appear in the same color, but underlined (figure 2).

Create breadcrumb links

Figure 2

If you preview the page in a browser of your choice (after saving all files, including the CSS file), you should see the new link change to white when you roll over it.

Create Breadcrumb Links - End of Article

Go to previous article | Go to Home Page | Go to next article

Feedback required!