It’s pretty common to use unordered lists for navigation, but something that is maybe a bit less common is a need to assign a separate navigation CSS style for navigation links that correspond to the page you’re currently on.
There’s a number of ways to make this happen, but for a recent project I implemented a way to handle it using a simple conditional statement. Basically, i’m checking against a single URL segment and the HTML that is displayed is based upon the results of this check:
<div id="navigation">
<ul>
<li><a href="{path='site_index'}Hear">{if segment_1 == "Hear"}<span class="currentnav">Listen </span>{if:else}Listen {/if}</a></li>
<li><a href="{path='site_index'}Blog">{if segment_1 == "Blog"}<span class="currentnav">Blog </span>{if:else}Blog {/if}</a></li>
<li><a href="{path='site_index'}Book">{if segment_1 == "Book"}<span class="currentnav">Book </span>{if:else}Book {/if}</a></li>
</ul>
</div>