Let's Build: A Consultancy Website - Part 19

Revisiting the primary navigation

In Part 18 we styled just about all of the home page header. In part 19, I revisited the primary navigation which I completely forgot to style!

Join me in this quick video screencast to bring our menu's design a little closer to what we created in Affinity Designer earlier in this series.

Dynamic classes inside loops

I wanted to add a quick note about created dynamic classes in Kirby using PHP and the built-in slug method. Check out the docs to read more about the feature but the code below should help explain how we utilized it in this part of the series. To quote the docs directly:

$page->slug([$lang = null])

Returns the slug. The slug is the last part of the page's URL. It is translatable in multi-language sites while the UID always stays the page's directory name without the sorting number.

Our main navigation is built using a dynamic loop that loops through all public facing pages in Kirby and outputs as an unordered list.

<nav class="navigation" role="navigation">
  <ul class="menu">
    <?php foreach($pages->visible() as $item): ?>
    <li class="menu-item<?= r($item->isOpen(), ' is-active') ?> <?= $item->slug() ?>">
      <a href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
    </li>
    <?php endforeach ?>
  </ul>
</nav>

If you pay attention to the li within the ul you will see a new bit of code I added:

<?= $item->slug() ?>

This simple line of code allowed me to output each page's name as a class and also make the name of the pages in lowercase as well as hyphenated. Assuming the page names don't change we are all set to roll. If the page names do change you can possibly utilize more PHP to create a more definite unique identifier for each menu item.

Download the Source Code for this Project

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18