Forum

Split navigation with sub headings

Hi fellow perch'ers,

I have a navigation which is divided up via sub headings, for instance:

Events (heading)

=> Event Name

=> Event Name

Now the only way I can think that I might get this working fairly smoothly might be to use Navigation groups and create the various groups, which in my case would be the headings and pages can then be assigned to a certain group and output on the page. Then with each nav template for that group I can just output the title for that respective group.

Is this a really crude way to implement what I'm trying to achieve?

Mathew Doidge

Mathew Doidge 2 points

  • 6 years ago
Simon Clay

Simon Clay 127 points

Hi Mat,

Will a page be assigned to more than one group?

Hi Simon,

No they will only ever be in one group and those groups will be accessible from every page as it will form the main navigation.

Drew McLellan

Drew McLellan 2638 points
Perch Support

You could use page attributes to group the pages, and then only output the attribute in the template when its value changes (with if/different).

Hi Drew,

Would you be able to provide a small example of what you mean? I'll start digging through the documentation again around page attributes. would that essentially give them the option to choose which heading the page belongs to, then I could use the if statements to generate the navigation under each heading?

***Edit

I've just watch the swift migrations video Rachel did and I think I'm starting to understand. Because all pages attributes are available to my navigation I can just setup in my navigation templates the if something is equal statements and generate the heading in that manner.

Simon Clay

Simon Clay 127 points

Hi Mat,

If there aren't any other complications/requirements could you structure your pages like this?:

Page: Group A (main listing page) => Page: A1 (child page) => Page: A2 (child page)

Page: Group B (main listing page) => Page: B1 (child page) => Page: B2 (child page)

Page: Group C (main listing page) => Page: C1 (child page) => Page: C2 (child page)

On the main listing pages, to output navigation showing only the child pages for that section you can use:

<?php 
    perch_pages_navigation(array(
        'from-path' => '*',
        'levels'    => 1,
        'include-parent'       => false,
    ));
?>

On the child pages, to show only the pages in the same group you can use:

<?php 
    perch_pages_navigation(array(
        'from-path' => '*',
        'levels'    => 1,
        'include-parent'       => false,
        'siblings'             => false,
    ));
?>

I think that's right. Info is here:https://docs.grabaperch.com/docs/navigation/perch-pages-navigation/

Hi guys,

I have:

<perch:if different="navgroup">

    <h1><perch:pages id="navgroup" /></h1>

    <perch:before>
        <ul>
    </perch:before>

        <li<perch:if exists="current_page"> class="selected"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
            <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>   
            <perch:pages id="subitems" encode="false" />
        </li>

    <perch:after>
        </ul>
    </perch:after>

</perch:if>

This is doing what I want and producing the title divider however I can't work out how to make the title appear and a new list start. I've tried moving the if and before around and each time it's not quite doing what I want. At the moment this whole thing is wrapped in a ul and then within that is my headings diving the 'li'. I feel I'm on the right tracks now...

The user can choose which heading to assign a navigation item to. So I need a way to force the start of a new unordered list for each heading.

Update

I don't know if this is a bad way of doing things but I removed the use of <perch:before> and instead use my if statements to define the output of the ul like so:

<perch:if different="navgroup">
    <h1><perch:pages id="navgroup" /></h1>
    <ul>
</perch:if>

    <li<perch:if exists="current_page"> class="selected"</perch:if><perch:if exists="ancestor_page"> class="ancestor"</perch:if>>
        <a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>   
        <perch:pages id="subitems" encode="false" />
    </li>

<perch:if different="navgroup">
    </ul>
</perch:if>

Actually above solution doesn't fully work. After adding a second item to group its appearing outside the ul for some reason. It seems thid method might not work !

Tried switching to some different if statements but the same result. How come it's only placing one list item in the new unordered list?

Drew McLellan

Drew McLellan 2638 points
Perch Support

Does <perch:showall /> give you any clues?

Hi Drew,

Guessing it should but I'm not sure what I could use to cure the issue. The output shows the navgroup being assigned correctly:

https://codepen.io/vdecree/pen/bNJKXL (sorry couldnt figure out how to get this data here so used a codepen). I feel bad as I should probably be able to get the carrot you're giving me!

Drew McLellan

Drew McLellan 2638 points
Perch Support

Ah, closing the </ul> there won't work - you need to close it before opening, except if it's the first item.

<perch:if different="navgroup">
    <perch:if exists="perch_item_first"><perch:else /></ul></perch:if>
    <h1><perch:pages id="navgroup" /></h1>
    <ul>
</perch:if>

Spot on Drew, works a treat. Many thanks as ever!