Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-17T19:54:58.837Z
Answers.Text: 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
Answers.UserDisplayName: Csaba Dobo
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-17T21:03:47.367Z
Answers.Text: 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).
Answers.UserDisplayName: Douglas McDonald
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-17T21:15:25.077Z
Answers.Text: 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.
Answers.UserDisplayName: Douglas McDonald
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-18T19:36:14.000Z
Answers.Text: 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.
Answers.UserDisplayName: Csaba Dobo
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-19T18:11:53.077Z
Answers.Text: 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?
Answers.UserDisplayName: Csaba Dobo
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-11-17T19:43:23.993Z
Answers.LastActivityDate: 2014-11-17T21:26:33.370Z
Answers.LastEditDate: 2017-04-13T12:51:00.160Z
Answers.UserDisplayName: Douglas McDonald
Body: <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>
  
Tags: <templating><navigation><singles>
Title: Simple navigation with active class?
ThreadText: # 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) %}
  <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](https://craftcms.stackexchange.com/questions/64/how-to-write-simple-navigation/87#87) 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](http://straightupcraft.com/craft-plugins/a-m-navigation) or [craft nav](http://straightupcraft.com/craft-plugins/craftnav).
  
  > **Comments:**
  > **username_0**: Thanks username_1, 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?  
  
  ---
  
  