Dynamic navigation to next column

[CT1012]

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.

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

Any other implementation suggestions.. TIA