Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Show only Children in Nav

Started by Pascal Mahlberg 9 years ago · 7 replies · 884 views
9 years ago

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:

HTML
<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!

last edited 10/18/17 by Pascal Mahlberg
9 years ago

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

If so this should work.

TWIG
{% 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
9 years ago

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:

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

9 years ago

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

Change your set to this and it should be correct.

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

Im using following technique:

TWIG
    {% 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
9 years ago

Is there any chance to get the link with an "active" class when i'm on this Site?

9 years ago

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.

TWIG
{% 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

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 80 9 hours ago
General · by pamtbaau, 14 hours ago
1 51 13 hours ago
General · by Andy Miller, 1 day ago
0 44 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago