Show only Children in Nav

Hey,

i am new in grav & twig and i would like to build a “footer-nav” with only children links of a specific main navigation ul.
By the way the same “Children-nav”, i would like to use on specific Subpages in a sidenavigation as a “overview” of the subpages.

Like:

<nav>
    <ul>
        <li></li>
        <li>
            <ul class="dropdown-menu"> // Only this List with all of their children links i would like to list
                <li></li> // Children
                <li></li> // Children
            </ul>
        </li>
    </ul>
</nav>

Any suggestings to this topic?

Thank you a lot and have a nice day!

If I’m understanding correctly, you want to output the children of a specific page, right?

If so this should work.

{% set items = { items: {'@page.children': '/path/to/parent'},'order': {'by': 'folder', 'dir': 'asc'}} %}
<ul>
    {% for item in items %}
        <li><a href='{{item.url}}'>{{item.title}}</a></li>
    {% endfor %}
</ul>
1 Like

Thank you for your respond. I just tried to use this code snippet, but unfortunately, if i’m linking absolut to the site it doesn’t work for me. I show you my page tree:

/startseite
/privilegien
/privilegien/children 1
/privilegien/children 2
/privilegien/children 3
/privilegien/...
/angebote
/ueber-uns
/partner
/kontakt

In this case i would like to show only the Children Links from “/privilegien”.

Here i have to use the absolute link to the parent like “/privilegien” or a relative link from the page i use this snippet?

Here it only shows a ul with two empty li in the html.

My bad on that. I left out part of the code.

Change your set to this and it should be correct.

{% set items = page.collection({ items: {'@page.children': '/privilegien'},'order': {'by': 'folder', 'dir': 'asc'}}) %}
1 Like

Thank you! This works for me! Have a nice day! :sunglasses:

1 Like

Im using following technique:

    {% set footermenu = page.collection( {'items':{'@taxonomy':{'navigation': 'footer'}}, 'order':{'by': 'header.order', 'dir': 'asc'} }) %}
    {% if footermenu | length > 0 %}
        <p>
            {% for page in footermenu %}
                <a href="{{ page.url }}">{{ page.title }}</a>
                {% if not footermenu.isLast(page.path) %}
                    &middot;
                {% endif %}
            {% endfor %}
        </p>
    {% endif %}

Using a taxonomy named “navigation” I can create multiple menus, usually it’s only the “siteservice”. The pages are routable but not visible (i.e.: no number prefix)

1 Like

Is there any chance to get the link with an “active” class when i’m on this Site?

Do you just want to know if one of the pages in the list is the page you’re currently on? If so, this might work. I haven’t tested it with a collection, but worth a shot.

{% for item in items %}
    {% set isCurrent = (item.active or item.activeChild) ? 'active' : '' %}
    <li class='regular-class {{isCurrent}}'><a href='{{item.url}}'>{{item.title}}</a></li>
{% endfor %}
1 Like