Create Breadcrumbs

"Breadcrumbs" in a web site are visual indicators of where you are, usually at the top of the page. They are a clickable guide to where you are in a web site that can be very helpful for users finding their way through a complex site.

For example, consider this sample hierarchical site with several nested folders:

Notice that every folder in this site has an index file, which produces a table of contents for that folder. For example Sports\Nonfootball\index is the table of contents for the nonfootball section. When users go into any article in that folder, they will see a "You are here" tag:

Each part of the trail is a link to the appropriate index page.

To create breadcrumbs in your site:

1. Create an index file in every folder. These index files can all be the same or can be different. You can create a custom template for index files if they are all the same. That index file might include a loop like:

{$ foreach x in (and thisFolder (not (filename "index"))) $}

This loop will list all the articles in this folder except the index file itself.

2. In the index file, use the Extra 2 field to store breadcrumbs. You will have to manually create breadcrumbs for each folder in your site. This is a nuisance but since the folders in your site probably don't change that often, it's not that bad. For example in the nonfootball index file you might have this as the Extra 2 field:

Those links were created manually to the appropriate index files.

3. Modify your templates to display the breadcrumbs on every page, using this code:

{$ foreach 1 x in (and thisFolder (fileName "index")) $}
       You are here: {$ x.extra2 $}
    {$ next $}

This automatically pulls out the extra 2 field from the file named "index" in the current folder.

A complete sample site showing how to create a site with breadcrumbs can be downloaded here (468KB).

CityDesk Home

Fog Creek Home

Email Us