Creating navigation

When you start creating your new site, one of the first things you think about is how to create the navigation. b:structure is a perfect tool for that. Here's few examples how to use it together with other tags to create a navigation.

I would like to create a navigation which HTML would look like this:

<ul>
    <li><a href="...">Home</a></li>
    <li><a href="...">Products</a></li>
    <li><a href="...">Contact information</a></li>
</ul>

I'll start by using b:structure that lists pages the way they appear in Bildy content navigator. This B:tag needs two attributes: parent and name. Parent is the path to the place from which you want to list the pages. You can freely choose the name as long as it's unique and not any reserved word.

I want to list all the pages from the top level, so I'll use / as the root:

<ul>
    <b:structure name="navi" parent="/">
        <li><a href="<b:navi.url/>"><b:navi.name/></a></li>
    </b:structure>
</ul>

This will output the unordered list I wanted. Next, I'd like to highlight the page that is currently open. For that I'll use b:if and b:page.metadata.path

<ul>
    <b:structure name="navi" parent="/">
        <b:if condition="<b:navi.path/> = <b:page.metadata.path/>">
            <li class="selected">
        </b:if>
        <b:else>
            <li>
        </b:else>
        <a href="<b:navi.url/>"><b:navi.name/></a></li>
    </b:structure>
</ul>

Now class named "selected" will be included to the list element that is currently open.

To list all the sub pages of the opened page, we could use b:navi.recursion. This calls the same query again, but I'll give it a new parent value. To get the UL tags in the beginning and the end of the sub list, I'll place them in b:before and b:after tags.

<div id="navigation">
    <b:structure name="navi" parent="/">
        <b:before><ul></b:before>
        <b:if condition="<b:navi.path/> = <b:page.metadata.path/>">
            <li class="selected">
        </b:if>
        <b:else>
            <li>
        </b:else>
            <a href="<b:navi.url/>"><b:navi.name/></a>
            <b:if condition="<b:page.metadata.path/> begins <b:navi.path/>">
                <b:navi.recursion parent="<b:navi.path/>"/>
            </b:if>
        </li>
        <b:after></ul></b:after>
    </b:structure>
</div>

Now when I navigate to page /products/milk I get  HTML:

<div id="navigation">
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/products">Products</a>
            <ul>
                <li><a href="/products/cheese">Cheese</a></li>
                <li class="selected"><a href="/products/milk">Milk</a></li>
            </ul>
        </li>
        <li><a href="/contact-info">Contact info</a></li>
    </ul>
</div>

I hope this gave you ideas for creating your own navigation.

If you don't want to list certain pages in your navigation, set its publishing status to "hidden from the navigation". You can also limit pages by testing that they have certain template or datamodel.

If you want your navigation to start from a certain level, you can use b:env.request tag with depth attribute as a b:getstructure parent value.