Iain Urquhart

{entry}

New ‘linear style’ for taxonomy:nav…

0 Comments

The latest release of Taxonomy (v1.2.3) is not particularly blog worthy, it contains a couple of nice new features - but one that I’ve been playing with recently is the style="linear" param on the nav tag.

I’m sure there’s going to be a few questions about how to use it so figured I’d do a little write up and post some example code to give folks an idea of how it could be useful.

A bit of background

I got a feature request from someone on Devot:ee asking if there was a way to strip the wrapping markup around each node when the nav tag was output, pretty much the same as the channel:categories style="linear" parameter does. At first I kind of ignored the request as I couldn’t think of any use cases for it but as a couple more folks chimed in I decided to add the feature.

Then I started playing with it, and wondered how hard it would be to recreate an unordered list using conditionals through node iterations… Turns out it was pretty straight forward and managed to get it working relatively quickly.

EDIT: Actually, its more complicated than I thought writing a dynamic unordered list using the linear parameter. The code below will fail in certain circumstances because it may leave x amount of tags open. I’ve been meaning to review this again but have left it open for now.

For anyone up to the challenge, there are a couple of undocumented variables for the nav tag which you might find useful: {node_previous_level} & {node_previous_level_diff}

Building an unordered list with style="linear"

Here’s the code I came up with, it would be good for a nav menu up to four levels deep.

<ul>
{exp:taxonomy:nav tree_id="1" entry_id="{entry_id}" style="linear" display_root="no"}
    
    
<!-- we have our opening <ul>, so add for any further levels -->
    
{if node_level_count == && node_level 1}<ul>{/if}
    
    
<!-- every node will start with this -->
    <
li><a href="{node_url}">{node_title}</a>
    
    <!-- if 
we don't have children, just close the <li> -->
    {if node_has_children == ""}</li>{/if}
    
    <!-- close our opening tags, rinse and repeat for as many levels needed -->
    {if node_level_count == node_level_total_count && node_level == 2 && node_has_children == ""}
    </ul></li>
    {if:elseif node_level_count == node_level_total_count && node_level == 3 && node_has_children == ""}
    </ul></li></ul></li>
    {if:elseif node_level_count == node_level_total_count && node_level == 4 && node_has_children == ""}
    </ul></li></ul></li></ul></li>
    {/if}
    
{/exp:taxonomy:nav}
</ul> 

As you can see, it’s quite verbose and it’s kind of redundant given the tag outputs an unordered list anyway - but if you’re trying to display the nav in any other manner which requires nesting, like xml, plain old nested divs or definition lists, this should give you a head start on how you do it :)

↑ Back to top