<p>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:</p>

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

<p>For more dynamic nav:</p>

<p>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.</p>

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

<ol>
<li><p>Create a separate <code>structure</code> (named 'primary-nav' for example) that links to the corresponding <code>singles</code> via an <code>entries</code> field (set to limit 1). See <a href="https://craftcms.stackexchange.com/questions/64/how-to-write-simple-navigation/87#87">this question</a> for an example.</p></li>
<li><p>Instead of <code>singles</code>, opt to use a <code>structure</code> (named 'pages'  for example) with different <code>Entry Types</code> defined for each of your page layouts. You can then use <code>entry.type</code> or <code>craft.request.segment(1)</code> in your template to set the 'active' class and load the appropriate sub-template.</p></li>
<li><p>Use one of the navigation plugins designed specifically to create page navigation, like <a href="http://straightupcraft.com/craft-plugins/a-m-navigation" rel="nofollow noreferrer">a&amp;m navigation</a> or <a href="http://straightupcraft.com/craft-plugins/craftnav" rel="nofollow noreferrer">craft nav</a>.</p></li>
</ol>

CC BY-SA 3.0
2014-11-17T19:54:58.837Z
Thanks Douglas, I had the impression that singles were static pages and channels more dynamic ones. But I guess I was wrong. I need to understand what these exactly mean: structure, single, segment etc. Are there any good screenshots or diagrams available? thx
Csaba Dobo
CC BY-SA 3.0
2014-11-17T21:03:47.367Z
You are correct in your assumption, however, there are also more advanced ways to use a structure to contain your one-off pages for the purposes of generating nav, etc if you like. `Structure` behaves like a `Channel` except hierarchical (i.e. parents and children). Single is, as you know, for one-off pages or other content. Segment is the uri segment (i.e. /segment1/segment2/etc).
Douglas McDonald
CC BY-SA 3.0
2014-11-17T21:15:25.077Z
Keep in mind, if your site architecture rarely changes, then using singles and static nav is fine. Using one of the other methods is only if you want to be able to dynamically reorder the site nav or create new pages on the fly in the CMS.
Douglas McDonald
CC BY-SA 3.0
2014-11-18T19:36:14.000Z
I am rather a designer / front end guy but not good with programming except html. That is why I am looking for a diagram on how this is being put together. But this helped me, thanks.
Csaba Dobo
CC BY-SA 3.0
2014-11-19T18:11:53.077Z
I decided to try  a&m navigation using this in my template: {{ craft.amNav.getNav("fomenu", {
 classActive: "active"
 }) }}  ... but not getting the active class showing up. What am I missing?
Csaba Dobo
CC BY-SA 3.0
2014-11-17T19:43:23.993Z
2014-11-17T21:26:33.370Z
2017-04-13T12:51:00.160Z
Douglas McDonald
<p>What is the best way to create a simple (one level) navigation that also have active class?</p>

<p>My section types are singles only for now.</p>

<p>Thank you</p>

<templating><navigation><singles>
Simple navigation with active class?
# Simple navigation with active class?

(Asked by: username_0 on 2014-11-17)

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

**Tags:** templating, navigation, singles

---

## 1 answers

### Answer by username_1 on 2014-11-17. Score: 4

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) %}

    About
    Projects
    News
    {li}etc


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:

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.
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.
Use one of the navigation plugins designed specifically to create page navigation, like a&m navigation or craft nav.

> **Comments:**
> **username_0**: Thanks Douglas, I had the impression that singles were static pages and channels more dynamic ones. But I guess I was wrong. I need to understand what these exactly mean: structure, single, segment etc. Are there any good screenshots or diagrams available? thx  
> **username_1**: You are correct in your assumption, however, there are also more advanced ways to use a structure to contain your one-off pages for the purposes of generating nav, etc if you like. `Structure` behaves like a `Channel` except hierarchical (i.e. parents and children). Single is, as you know, for one-off pages or other content. Segment is the uri segment (i.e. /segment1/segment2/etc).  
> **username_1**: Keep in mind, if your site architecture rarely changes, then using singles and static nav is fine. Using one of the other methods is only if you want to be able to dynamically reorder the site nav or create new pages on the fly in the CMS.  
> **username_0**: I am rather a designer / front end guy but not good with programming except html. That is why I am looking for a diagram on how this is being put together. But this helped me, thanks.  
> **username_0**: I decided to try  a&m navigation using this in my template: {{ craft.amNav.getNav("fomenu", {  classActive: "active"  }) }}  ... but not getting the active class showing up. What am I missing?  

---

