2

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

carlcs
  • 36,220
  • 5
  • 62
  • 139
Csaba Dobo
  • 41
  • 3

1 Answers1

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

Community
  • 1
Douglas McDonald
  • 13,457
  • 24
  • 57
  • 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 Nov 17 '14 at 19:54
  • 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 Nov 17 '14 at 21:03
  • 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 Nov 17 '14 at 21:15
  • 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 Nov 18 '14 at 19:36
  • 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 Nov 19 '14 at 18:11