pageSUMMARY

Create Breadcrumb Links

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 CSS Rule Definition Pane:

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.

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).

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:

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:

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:

&gt;

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).

Figure 2

relevantLINK

Browser Stats
The most commonly used browsers are listed here. Like it or not, designers must take notice of what most people are using.

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.