<p>You can write a recursive macro to display the site structure. In that macro, when you are looping through the entries <code>loop.index</code> will be the the loop index, and <code>e.level</code> will be the depth of entry <code>e</code> in the structure. Here is a macro to print the navigation.</p>

<pre><code>{% macro recursiveNav(entries) %}
{% import _self as self %}
  &lt;ul&gt;
    {% for e in entries %}
      {# loop.index is our index, e.level is our level #}
      &lt;li&gt;
        {# using twig range here to output right number of 0s #}
        {% if e.level &gt; 1 %}{% for i in range(2, e.level) %}0{% endfor %}{% endif %}{{loop.index}}
        {{e.link}}
        {% if e.hasDescendants %}
          {{self.recursiveNav(e.children)}}
        {% endif %}
      &lt;/li&gt;
    {% endfor %}
  &lt;/ul&gt;
{% endmacro %}

{% import _self as self %}
{% set entries = craft.entries.section('sitecontent').level(1) %}
{# call recursive nav, pass it level 1 entries #}
{{ self.recursiveNav(entries) }}
</code></pre>

<p>If all you want is the title for a particular entry (<em>02 strategy</em> e.g.), you can use almost the same recursive macro to do that:</p>

<pre><code>{% macro recursiveTitle(entries, distinguishedId) %}
{% import _self as self %}
  {% for e in entries %}
    {% if e.id == distinguishedId %}
      {# this is the one we want #}
      {% if e.level &gt; 1 %}{% for i in range(2, e.level) %}0{% endfor %}{% endif %}{{loop.index}}
      {{e.title}}
    {% endif %}
    {% if e.hasDescendants %}
      {{self.recursiveTitle(e.children, distinguishedId)}}
    {% endif %}
  {% endfor %}
{% endmacro %}

{% import _self as self %}
{% set entries = craft.entries.section('sitecontent').level(1) %}
{# call recursive title, pass it level 1 entries and id of our active entry #}
{{ self.recursiveTitle(entries, entry.id) }}
</code></pre>

<p>There is no way to pass data out of a macro, so the recursiveNav can't also save the index and level of the active entry for later.</p>

CC BY-SA 3.0
2014-08-12T06:50:46.640Z
2014-08-12T06:50:46.640Z
Marion Newlevant
<p>What about using CSS for your numbers? (Yes, this answer makes your question sound a bit off-topic, sorry for that, hehe)</p>

<p>Mainmenu:</p>

<pre><code>.mainNav {
  counter-reset: mainNav;
}
.mainNav-item {
  counter-increment: mainNav;
}
.mainNav-item::before {
  content: counter(mainNav) ". ";
}
</code></pre>

<p>Submenu (double digits):</p>

<pre><code>.subNav {
  counter-reset: subNav;
}
.subNav-item {
  counter-increment: subNav;
}
.subNav-item::before {
  content: counter(subNav, decimal-leading-zero) ". ";
  color: gold;
}
</code></pre>

<p>.</p>

<p><em>Edit:</em></p>

<p>Misunderstood that <code>&lt;h1&gt;</code> problem at first. I don't think that there's a dedicated function in Craft to get the position in a structure.</p>

<p>But you can get the entry position like so. You have to get all the structure entries that are on the same structure level with a new ElementCriteriaModel (→ new DB Queries) and then you do a conditional to find the position of the current entry.</p>

<pre><code>{# Get the IDs of all the sections #}
{% set currentSectionId = entry.id %}
{% set allSectionIds = craft.entries.section('myStructure').level(1).ids() %}

{# Define var before loop #}
{% set sectionNumber = '' %}

{# Loop through all section IDs and find the one that matches the current #}
{% for key, sectionId in allSectionIds if sectionId == currentSectionId %}

    {# Use array key to calculate the section's position #}
    {% set sectionNumber = key + 1 %}

{% endfor %}

{# Save the section's position in a custom data attribute #}
&lt;h1 data-section-no="{{ sectionNumber }}"&gt;Test&lt;/h1&gt;
</code></pre>

<p>Use CSS to style your heading:</p>

<pre><code>h1:before {
  content: attr(data-section-no) ". ";
}
</code></pre>

CC BY-SA 3.0
2014-08-11T14:16:50.927Z
Oh thats smart! I will try it. But how to display the number before the h1 title in the page?

02. hisory
Johannes Lamers
CC BY-SA 3.0
2014-08-11T14:18:41.557Z
Use the `mainNav` class on it or modify the CSS to your needs, @Johannes.
carlcs
CC BY-SA 3.0
2014-08-11T16:42:34.793Z
IGNORE that comment, totally misunderstood what you where after @Johannes. See my new edit for that `<h1>` problem.
carlcs
CC BY-SA 3.0
2014-08-11T14:14:36.733Z
2014-08-11T16:45:11.680Z
2014-08-11T16:45:11.680Z
carlcs
<p>I'm stuck. For a new site I need to display numbers before the main h1 title and in the submenu's.</p>

<p><strong>Example:</strong></p>

<ul>
<li>1 Home</li>
<li>2 About

<ul>
<li>01 history </li>
<li>02 strategy (active page)</li>
<li>03 profile</li>
<li>etc. etc.</li>
</ul></li>
</ul>

<p>In the active page (strategy) the title needs to be 02 strategy.
So the number is based on the position inside the parent. If I reorder strategy to the first position, the number needs to be 1. </p>

<p>Can someone help me please?</p>

<p><a href="http://durk.com/example.png" rel="nofollow noreferrer">preview http://durk.com/example.png</a></p>

<entries><navigation><structure>
Display number based on position in structure hierarchy
# Display number based on position in structure hierarchy

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

I'm stuck. For a new site I need to display numbers before the main h1 title and in the submenu's.

**Example:**

* 1 Home
* 2 About
  + 01 history
  + 02 strategy (active page)
  + 03 profile
  + etc. etc.

In the active page (strategy) the title needs to be 02 strategy.
So the number is based on the position inside the parent. If I reorder strategy to the first position, the number needs to be 1.

Can someone help me please?

[preview http://durk.com/example.png](http://durk.com/example.png)

**Tags:** entries, navigation, structure

---

## 2 answers

### Answer by username_2 on 2014-08-11. Score: 6 | Accepted answer

What about using CSS for your numbers? (Yes, this answer makes your question sound a bit off-topic, sorry for that, hehe)
Mainmenu:
.mainNav {
  counter-reset: mainNav;
}
.mainNav-item {
  counter-increment: mainNav;
}
.mainNav-item::before {
  content: counter(mainNav) ". ";
}

Submenu (double digits):
.subNav {
  counter-reset: subNav;
}
.subNav-item {
  counter-increment: subNav;
}
.subNav-item::before {
  content: counter(subNav, decimal-leading-zero) ". ";
  color: gold;
}

.
Edit:
Misunderstood that  problem at first. I don't think that there's a dedicated function in Craft to get the position in a structure.
But you can get the entry position like so. You have to get all the structure entries that are on the same structure level with a new ElementCriteriaModel (→ new DB Queries) and then you do a conditional to find the position of the current entry.
{# Get the IDs of all the sections #}
{% set currentSectionId = entry.id %}
{% set allSectionIds = craft.entries.section('myStructure').level(1).ids() %}

{# Define var before loop #}
{% set sectionNumber = '' %}

{# Loop through all section IDs and find the one that matches the current #}
{% for key, sectionId in allSectionIds if sectionId == currentSectionId %}

    {# Use array key to calculate the section's position #}
    {% set sectionNumber = key + 1 %}

{% endfor %}

{# Save the section's position in a custom data attribute #}
Test

Use CSS to style your heading:
h1:before {
  content: attr(data-section-no) ". ";
}

> **Comments:**
> **username_0**: Oh thats smart! I will try it. But how to display the number before the h1 title in the page?  02. hisory  
> **username_2**: Use the `mainNav` class on it or modify the CSS to your needs, @Johannes.  
> **username_2**: IGNORE that comment, totally misunderstood what you where after @Johannes. See my new edit for that `<h1>` problem.  

---

### Answer by username_1 on 2014-08-12. Score: 3

You can write a recursive macro to display the site structure. In that macro, when you are looping through the entries loop.index will be the the loop index, and e.level will be the depth of entry e in the structure. Here is a macro to print the navigation.
{% macro recursiveNav(entries) %}
{% import _self as self %}
  
    {% for e in entries %}
      {# loop.index is our index, e.level is our level #}
      
        {# using twig range here to output right number of 0s #}
        {% if e.level > 1 %}{% for i in range(2, e.level) %}0{% endfor %}{% endif %}{{loop.index}}
        {{e.link}}
        {% if e.hasDescendants %}
          {{self.recursiveNav(e.children)}}
        {% endif %}
      
    {% endfor %}
  
{% endmacro %}

{% import _self as self %}
{% set entries = craft.entries.section('sitecontent').level(1) %}
{# call recursive nav, pass it level 1 entries #}
{{ self.recursiveNav(entries) }}

If all you want is the title for a particular entry (02 strategy e.g.), you can use almost the same recursive macro to do that:
{% macro recursiveTitle(entries, distinguishedId) %}
{% import _self as self %}
  {% for e in entries %}
    {% if e.id == distinguishedId %}
      {# this is the one we want #}
      {% if e.level > 1 %}{% for i in range(2, e.level) %}0{% endfor %}{% endif %}{{loop.index}}
      {{e.title}}
    {% endif %}
    {% if e.hasDescendants %}
      {{self.recursiveTitle(e.children, distinguishedId)}}
    {% endif %}
  {% endfor %}
{% endmacro %}

{% import _self as self %}
{% set entries = craft.entries.section('sitecontent').level(1) %}
{# call recursive title, pass it level 1 entries and id of our active entry #}
{{ self.recursiveTitle(entries, entry.id) }}

There is no way to pass data out of a macro, so the recursiveNav can't also save the index and level of the active entry for later.


---

