How to create a simply menu?

Kirby 3 Solved ✅
1

I’m working my way through the Kirby videos. I am currently on ‘your first Kirby template’. I want to create a menu for my site, but don’t want to use the PHP menu shown in the video, because it is my personal website, I can easily change the HTML and the PHP method shown here is more complicated than I need.

So can I simply do the following?

<ul>
	<li><a href="about">About</a></li>
	<li><a href="portfolio">Portfolio</a></li>
	<li><a href="services">Services</a></li>
	<li><a href="contact">Contact</a></li>
</ul>

I don’t need to add a “.html” or “.php” ending to the links?

2

Yes, you can do this, although it’s usually not recommendable to a) hard-code links and b) use relative links like that.

3

a) hard-code links
I don’t know what that means: hard-code as oppose to dynamically create the links with PHP?

b) use relative links like that
Sorry I’m not entirely sure I know what that means either! Would an absolute link be “xyz.com/about”? What is the ‘best’ way to write the links? I presume if I write absolute links, and I’m working locally on the site on my computer, the links will take me to the online page and not my local copy?

4

To create your menu, you could do it with php like this:

    <nav class="menu">
      <?php foreach ($site->children()->listed() as $item): ?>
      <a <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
      <?php endforeach ?>
    </nav>

That way, you would also be able to highlight the currently open page. And your URLs would work locally and on your remote server.

Also, if you add new listed page, they would automatically get added to the menu. After all, that’s usually why we use a CMS as opposed to writing static HTML.

5

Also, if you add new listed page, they would automatically get added to the menu. After all, that’s usually why we use a CMS as opposed to writing static HTML.

I’m trying to learn Kirby by working on my own website. For now this is far too complicated for me. I’d like to come back to this at a later point.

b) use relative links like that
Sorry I’m not entirely sure I know what that means either! Would an absolute link be “xyz.com/about ”? What is the ‘best’ way to write the links? I presume if I write absolute links, and I’m working locally on the site on my computer, the links will take me to the online page and not my local copy? What’s wrong with relative links?

6

If you are fine with your first example, then go ahead with it. I can only give recommendations and tell you how I would do it and why.

Yes, that’s what I meant, that’s the result you would get from calling $page->url().

As far as I know, they are not ideal from a SEO perspective (and also it makes it easier for people to download your website with all links working) and probably some other issues.

7

Hi. I’ve decided to go fully down the Kirby route and not fight it! So I’m now using the php menu as per your suggestion. Thanks!

To highlight the page that is open I’ve done the following:

<ul>
	<?php foreach ($site->children()->listed() as $item): ?>
	<li><a <?php e($item->isOpen(), ' class="active"') ?> href="<?= $item->url() ?>"><?= $item->menu_name()->html() ?></a></li>
	<?php endforeach ?>
</ul>

The same as per your recommendation above, but replacing 'aria-current ' with class="active". It works, but I have no idea what aria-current is and whether it should stay??

8

We originally had what you have done now, but for more accessibility, the aria-current attribute was now added in our Starterkit. You can learn more about this

9

Thanks. How can I use aria-current in my CSS to highlight the current page?

.aria-current doesn’t work and nor does
#aria-current

10
1 Like
11

I’ve implemented this and used aria-current to highlight the page the user is on. For example when I’m on my ‘Portfolio’ page, the ‘Portfolio’ link in the nav is highlighted. But, then when I’m on a child ‘Project’ page of the ‘Portfolio’ page, the ‘Portfolio’ link is still highlighted.

This looks odd to me. I’m no longer on the Portfolio page – but a child page – so why is ‘Portfolio’ still highlighted? Is it possible to not highlight parent pages, when on a child page?

Or is this to be expected?

12

Instead of isOpen() you would use isActive() to only add the attribute when the you are actually on the page.

1 Like
13

Once again, thank you!