October 2009 Archives

Advanced Breadcrumb Navigation

| 2 Comments

I needed a flexible system to append crumbs to an array… potentially remove items from the array, then output the array on the final template as a breadcrumb navigation. This was my solution using Movable Type template tags.

I used the Var function attribute to push, shift, unshift items on an array variable and then used mt:loop to output the items in the array into a list of breadcrumbs. This was used in a Movable Type install with 20 blogs.

In a “global config” template module (included in the first line of every template) set the top level of the breadcrumbs:

<mt:SetVarBlock name="breadcrumbs" function="push">
    <a href="<$mt:BlogURL$>"><$mt:BlogName$></a>
</mt:SetVarBlock>

On an Entry archive template, add crumb to Category archive, Daily archive, and then add the Entry title:

<mt:IfArchiveTypeEnabled archive_type="Category">
    <mt:If tag="EntryCategory">
        <mt:SetVarBlock name="breadcrumbs" function="push">
            <a href="<$mt:EntryLink type="Category"$>"><$mt:EntryCategory$></a>
        </mt:SetVarBlock>
    </mt:If>
</mt:IfArchiveTypeEnabled>
<mt:IfArchiveTypeEnabled archive_type="Daily">
    <mt:SetVarBlock name="breadcrumbs" function="push">
    <a href="<$mt:EntryLink type="Daily"$>"><$mt:EntryDate format="%B %d, %Y"$></a>
    </mt:SetVarBlock>
</mt:IfArchiveTypeEnabled>
<mt:SetVarBlock name="breadcrumbs" function="push">
    <$mt:EntryTitle$>
</mt:SetVarBlock>

On an Entry Listing archive template for a blog with Monthly archives enabled, add crumb for Archive Index page and for the current page.

<mt:IfArchiveTypeEnabled archive_type="Monthly">
    <mt:SetVarBlock name="breadcrumbs" function="push">
        <a href="<$mt:Link template="archive_index"$>">Archives</a>
    </mt:SetVarBlock>
</mt:IfArchiveTypeEnabled>
<mt:SetVarBlock name="breadcrumbs" function="push">
    <$mt:ArchiveTitle$>
</mt:SetVarBlock>

In index templates (such as the Archive Index), add current page as the last crumb to the end of the array:

<mt:SetVarBlock name="breadcrumbs" function="push">
    Archives
</mt:SetVarBlock>

To replace the first crumb if the BlogID is “1”, use the “shift” function to remove and the “unshift” function to prepend a crumb (I added this to a “blog config” template module which is included just after the “global config” template module in the first two lines of each template):

<mt:If tag="BlogID" eq="1">
    <$mt:GetVar name="breadcrumbs" function="shift" setvar="removed_value"$>
    <mt:SetVarBlock name="breadcrumbs" function="unshift">
        <a href="/foo/">Foo</a>
    </mt:SetVarBlock>
</mt:If>

On the main index template for each blog I didn’t want to show breadcrumbs, so I’d set this boolean value:

<$mt:Var name="show_breadcrumbs" value="0"$>

To output the crumbs, use the mt:loop tag:

<mt:If name="show_breadcrumbs">
<div class="breadcrumbs">
    <ol>
    <mt:Loop name="breadcrumbs">
        <li<mt:If name="__last__"> class="last"</mt:If>><$mt:Var name="__value__" trim="1"$></li>
    </mt:Loop>
    </ol>
</div>
</mt:If>