Want to create a Footermenu with all pages of the site

On my root-level i have about 10 pages.
all these pages i will output as a block of 3 colums… after 4 menu items i need a div to align the columns besides to each other.

    <?php foreach($pages as $mainPage): ?> 
   
    <div class="navigation-section">
       <a href="<?php echo $mainPage->url() ?>">
     <?php echo $mainPage->title() ?></a>
   
     <?php foreach($mainPage->children() as $subPage): ?>
     <div class="navigation-subpage">
        <a href="<?php echo $subPage->url() ?>"><?php echo $subPage->title() ?></a>
        <?php echo $subPage->shortDesc()->kirbytext() ?>
      </div>
    <?php endforeach ?>
  </div>
<?php endforeach ?>

how can i create such a menu? i don’t know to start…
thanks.

That code looks invalid, there is a missing closing div. Does your problem persist if you correct that?

Usually for things like this, I use the treemenu, but you may have to adjust the HTML in it slightly to work with your site.

However it sounds like it might actually be a CSS problem - browsers don’t like adding up to 100%, it will often drop the 4th column down, depending on the numbers you are using for the column widths. This is because some browsers round numbers up rather then down, which means your total column width can exceed 100% in some circumstances. Without seeing the CSS you are using, I can’t tell for sure.

1 Like

yap. the output is only each menu-item with a wrap
:frowning:

Your code is ok, but to achieve your 3 columns, I’d use chunks and create a subcontainer for each chunk.

https://getkirby.com/docs/cheatsheet/pages/chunk


<div class="footer-navigation">
<?php $chunks = $pages->chunk(3); ?>
<?php foreach($chunks as $chunk): ?>
  <div class="navigation-section">
    <?php foreach($chunk as $item): ?>
     <a href="<?php echo $item->url() ?>">
     <?php echo $item->title() ?></a>
       <?php foreach($item->children() as $subPage): ?>
       <div class="navigation-subpage">
        <a href="<?php echo $subPage->url() ?>"><?php echo $subPage->title() ?></a>
        <?php echo $subPage->shortDesc()->kirbytext() ?>
      </div>
    <?php endforeach ?>
    <?php endforeach; ?>
  </div>
<?php endforeach ?>
</div>

Some basic CSS:

.footer-navigation {
  display:grid; 
  grid-template-columns: repeat(3, 1fr);
}

.navigation-subpage {
  padding-left: 15px;
}

You might not want to use CSS grid, but might as well use flexbox or inline-blocks or floats or whatever. Your job to make this responsive.

Great, you’ve fixed the code example in the original post. Can you confirm wether this is a visual problem or not? Are your pages getting listed correctly on the page, but having trouble displaying them visually with CSS?

very fine!
thanks a lot

<?php $chunks = $pages->chunk(4); ?>
				<?php foreach($chunks as $items): ?>
				  <ul class="row">
				    <?php foreach($items as $item): ?>
				    <li><?= $item->title() ?></li>
				    <?php endforeach; ?>
				  </ul>
				<?php endforeach ?>

Sure, but thats a CSS problem, not a Kirby problem :slight_smile:

1 Like

@dersven As regards the markup, I’d go for a nav container with unordered lists inside instead of the current divs.

2 Likes