Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Dynamic navigation to next column

Avatar

Avatar
Validate 1
Level 2
CT1012
Level 2

Likes

7 likes

Total Posts

67 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
Level 2
CT1012
Level 2

Likes

7 likes

Total Posts

67 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile
CT1012
Level 2

14-06-2018

Hi

I'm trying to use the wknd navigation component(v1) to extend my functionality

I need to list the items dynamically in four rows... I'm planning to add four column options in dialog to select the number of items its display in each column.

1508501_pastedImage_0.png

Example: If I've 8 items to display and if i select 3 items for column1 , 2 items for column2.. It should automatically set the other 3 to column3

How can i filter the items w.r.t to the number I've given in the column dialog??

I'm trying to make some changes in group.html under navigation, even if pass the number I've selected how to val

<template data-sly-template.group="${@ items='The navigation items for the current level'}" data-sly-use.itemTemplate="item.html">

<div class="container cmp-navigation__group"><div class="container">

  <div class="row">

    <div class="col">

    <ul data-sly-list="${items}">

    <sly data-sly-test="${0 < itemsList.count <properties.column1 }">

        <sly data-sly-call="${itemTemplate.item @ item=item}"></sly>

        </sly>

    </ul>

</div>

<div class="col">

    <ul data-sly-list="${items}">

        <sly data-sly-call="${itemTemplate.item @ item=item}"></sly>

    </ul>

    </div>

    <div class="col">

    <ul data-sly-list="${items}">

        <sly data-sly-call="${itemTemplate.item @ item=item}"></sly>

    </ul>

    </div>

    <div class="col">

    <ul data-sly-list="${items}">

        <sly data-sly-call="${itemTemplate.item @ item=item}"></sly>

    </ul>

    </div>

    </div>

    </div>

</template>

I need the nav to look like this

1508502_pastedImage_0.png

Any other implementation suggestions.. TIA