Let’s Build: A Consultancy Website—Part 19

Revisiting the primary navigation

Andy Leverenz
Jul 26, 2017 · 2 min read

Originally published at web-crunch.com on July 26, 2017.

In Part 18 we styled just about all of the home page header. In part 19, I revisited a 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.

Subscribe to the channel to be notified of all new videos and future 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 which 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


Originally published at web-crunch.com on July 26, 2017.

The Web-Crunch Column

A publication for design, development, and business related articles published via medium and web-crunch.com

Andy Leverenz

Written by

Web-Crunch is a blog that delivers the crunchiest articles on design and development. Follow us or check out the website http://web-crunch.com

The Web-Crunch Column

A publication for design, development, and business related articles published via medium and web-crunch.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade