Print side nav section via keyword

innesz · 2025-04-10 10:00:01 UTC

Hey all,

I am looking for some help to use a keyword to target and print our side nav section which is currently hidden in mobile.

I am testing a new mobile friendly side nav which affixs to the top of the content and have this working via a metadata keyword on our sub domain site. But, on our corporate domain site we do not have this metadata field, the section nav is automatic based on parent and child pages being created.

How do I target this via a keyword?

In the main design parse file our side nav section is detailed as below:

<MySource_AREA id_name="side_nav_open" design_area="asset_lineage" cache="1">
        <div class="container">
            <div class="row">
    </MySource_AREA>

    <MySource_AREA id_name="side_nav_section" design_area="asset_lineage" cache="1" print="no">
        <MySource_SET name="levels_to_print" value="1" />
        <MySource_ASSET><h2 class="sub-nav-heading"><MySource_PRINT var="asset_name_linked" /></h2></MySource_ASSET>
        <MySource_DIVIDER></MySource_DIVIDER>
    </MySource_AREA>

    <MySource_AREA id_name="side_nav" design_area="menu_normal">
        <MySource_SET name="level" value="1"/>
        <MySource_SET name="show_subs" value="on_current" />
        <MySource_SET name="settings.class.normal" value="" />
        <MySource_SET name="settings.class.current" value="active" />
        <MySource_SET name="settings.class.hierarchy" value="active-parent" />
        <!-- LHS nav -->
        <nav class="hidden-xs hidden-sm col-md-3 col-lg-3 sub-nav" aria-label="Section Navigation">
            <ul>
                <li class="level-0">
                    <MySource_PRINT id_name="side_nav_section" />        
                    <MySource_ASSET>
                        <li class="level-1">
                            <a href="<MySource_PRINT var="asset_url"/>" class="<MySource_PRINT var="settings.class" />"><MySource_PRINT var="asset_name"/></a>
                            <MySource_SUB design_area="menu_normal">
                                <MySource_SET name="show_subs" value="on_current" />
                                <MySource_SET name="settings.class.normal" value="" />
                                <MySource_SET name="settings.class.current" value="active" />
                                <MySource_SET name="settings.class.hierarchy" value="active-parent" />
                                <ul>
                                    <MySource_ASSET>
                                        <li class="level-2">
                                            <a href="<MySource_PRINT var="asset_url"/>" class="<MySource_PRINT var="settings.class" />"><MySource_PRINT var="asset_name"/></a>
                                        </li>
                                    </MySource_ASSET>
                                </ul>
                            </MySource_SUB>
                        </li>
                    </MySource_ASSET>
                </li> 
            </ul>
        </nav>
    </MySource_AREA>

Thanks

innesz · 2025-04-10 11:51:52 UTC

Hi @harinder.singh,

This is something you replied to me about last year but wasnt something explored further.

Its the final recommendation based on accessibility testing to implement a nav menu in mobile.

I have found a keyword which prints level 0, 1 & 2 - %asset_linking_lineage^index:1^as_asset:asset_short_name% but I only need to print all the level 2s as in all the parent pages a section. Its only printing the current level 2 but not the others.

This is something you also suggested, to implement a show_if in the parse file. This might be a better option rather than using the default paint layout for all pages. Not sure of the pros and cons to that.

`<MySource_AREA id_name="show_side_column" design_area="show_if" print="no">

<MySource_SET name=“condition” value=“keyword_regexp”/>
<MySource_THEN>%globals_asset_contents_paint_layout_id_123456:<MySource_PRINT id_name=“global” var=“asset_assetid” />%</MySource_THEN>
<MySource_ELSE></MySource_ELSE>
</MySource_AREA>`

Thanks
Innes

harinder.singh · 2025-04-16 03:20:00 UTC

Hi Innes,

You should be able to control it via the “Show If” design area and metadata fields. You can select the root node.

Listing only Level 2s will be a bit tricky. You would want to sort the listing in A-Z order as well.

You have a few options here for your paint layout:

Asset Listing - Straightforward implementation, but sorting will happen at the frontend.
SSJS - You will have more control over the data along with the sorting.
Content API

Or you can use a combination of both Asset Listing and SSJS.

Let me know if you have any further questions.

innesz · 2025-04-21 13:20:32 UTC

Hi @harinder.singh,

Thanks for coming back to me on this.

I am not sure this would be the right set up. We always want our left hand nav menu to show and also show in mobile (this is what I need to achieve).

At the moment its not showing in mobile view so either hiding or showing this via the metadata wouldnt work. I need to have this happen responsively as it currently does in our KB site - https://kb.ros.gov.uk/rci/categories-of-ownership-or-tenancy/about-individuals

On this site the left hand nav affix’s to the top of the content to allow the user to select anchor points. The only issue is with this set up I add the anchor points to a metadata field. In our corporate site the nav is driving by the design.

Innes

innesz · 2025-04-21 14:28:38 UTC

Hi Harinder, I have been able to get this working via a paint layout and nested asset listing which only targets the level 2 children.

Thanks again for your help.
Innes

harinder.singh · 2025-04-22 03:46:39 UTC

Hi Innes, Good to know that you resolved it. I found that on the KB website, the side navigation is nested twice in your design area. See the screenshot below. I can see both in the desktop version. They are being controlled with CSS classes. This can be beneficial sometimes when your mobile navigation is designed in a more complex manner.

innesz · 2025-04-22 15:16:57 UTC

Hi Hardiner, thanks!! I think this is the best manageable option, especially for our editor community to be able to update in future.

Yes, I saw that this was the case. Would you recommend we do this with the new nested asset listing?? The HTML we have added will always be visible in inspect but not viewable in desktop view.

But, what we did notice was that with me nesting this in a paint layout the menu then appears when you view the child pages and then prints ‘no results found’ so we intend on using a class and target this in JS to hide the new nav menu in mobile when view child pages with ‘no results found’.

Innes