Simple navigation with active class?

Question

What is the best way to create a simple (one level) navigation that also have active class?

My section types are singles only for now.

Thank you

Answer 1

If you just want to set the active class on static nav then you can just create a conditional using any defining attribute (i.e. title, slug, id, uri-segment, etc). Here is an example using the uri-segment:

{% set uriSegment = craft.request.segment(1) %}
<ul class="primary-nav">
    <li><a {% if uriSegment == "about" %}class="active"{% endif %}" href="about">About</a></li>
    <li><a {% if uriSegment == "projects" %}class="active"{% endif %} href="projects">Projects</a></li>
    <li><a {% if uriSegment == "news" %}class="active"{% endif %} href="news">News</a></li>
    {li}etc</li>
</ul>

For more dynamic nav:

Singles are not particularly good for creating dynamic nav because there is no built in order or relationship between the items or even a way to identify if they are pages vs some other miscellaneous content. So you will generally have to employ some other strategy instead of, or in addition to, your singles.

If you want to create a more dynamic nav, then there are a few ways to go:

1. Create a separate structure (named 'primary-nav' for example) that links to the corresponding singles via an entries field (set to limit 1). See this question for an example.

2. Instead of singles, opt to use a structure (named 'pages' for example) with different Entry Types defined for each of your page layouts. You can then use entry.type or craft.request.segment(1) in your template to set the 'active' class and load the appropriate sub-template.

3. Use one of the navigation plugins designed specifically to create page navigation, like a&m navigation or craft nav.