Can I make parent page menu item unclickable?

[kurtg]

Hello,

I am new to Kirby and this is my first message to the forum. I am trying to convert my existing website to Kirby on my local computer to see if it is right for me. So far everything has worked out nicely except for this:

1. I have created a visible parent page called “Courses” which shows up in my main navigation menu.
2. The parent page has 8 visible child pages which pop up in the sub menu when I hover over the main “Courses” menu item.

Is there an easy way to have the “Courses” link not link to any page content at all? Essentially, I would just like to be able to hover over the “Courses” link and only be able to click on one of the 8 sublinks. Is that possible?

As a workaround I have followed the “Simple redirect” instructions and have made the “Courses” menu item redirect to the first child link. Is that the best I can do in this situation?

Kurt

[lukasbestle]

Welcome to the Kirby forum!

@kurtg

As a workaround I have followed the “Simple redirect” instructions and have made the “Courses” menu item redirect to the first child link. Is that the best I can do in this situation?

That’s something you need to to additionally, as someone could easily manually enter the URL of the parent page.

But making the link in the menu not clickable in the first place is quite straight-forward:

• Set a field in the parent page that determines that the page should not be accessed directly (like Nonclickable: true)
• Check in your menu snippet if that field is set. If so, don’t output a link but a simple text node:

<?php foreach($pages->visible() as $p): ?>
    <li>
      <?php if($p->nonclickable() === 'true'): ?>
        <?php e($p->isOpen(), '<strong>') ?><?php echo $p->title()->html() ?><?php e($p->isOpen(), '</strong>') ?>
      <?php else: ?>
        <a <?php e($p->isOpen(), ' class="active"') ?> href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
      <?php endif ?>

[tobiasweh]

I’d create a new template templates/node.php for pages that serve only as a parent with no content themselves. In this template use a go()-redirect to the first child page: The template file will have only one line

<?php go($page->children()->visible()->first()->url()) ?>

and maybe a blueprint like this:

<?php if(!defined('KIRBY')) exit ?>

title: Parent without content
pages:
  template: default
files: false
preview: first-child
fields:
  title:
    label: Menu entry
    type:  text
    help: Node pages don’t have content themselves.

When generating your navigation you can use $p->template()=='node' to test whether the item should be clickable or not.

<nav>
    <ul>
        <?php foreach($pages->visible() as $p): ?>
        <li <?php e($p->isOpen(), ' class="active"') ?>>
            <?php if($p->template() == 'node'): ?>
                <?php echo $p->title()->html() ?>
            <?php else: ?>
                <a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
            <?php endif ?>
        </li>
        <?php endforeach ?>
    </ul>
</nav>

[kurtg]

Thank you for the replies and suggestions. This seems more complicated than I thought it would be (due to my limited experience with Kirby). I think I’ll stick with the “Simple redirect” solution for now and maybe come back one of the above methods when I am feeling more comfortable with the coding.

Kurt

[texnixe]

If you need any more information, don’t hesitate to ask.

Basically, you need to make the link clickable based on some sort of condition. To achieve that, you can either use a field in your text file, or a special template as described in the examples above. These implementations have the advantage that they can be used in a more general way if you later add pages, for which you want to implement the same behavior.

If you only want to implement this for this one page, you just need to add a condition to your menu which checks for the page’s uid while the rest stays all the same:

<nav>
  <?php foreach($pages->visible() as $page): ?>
    <li <?php e($page->isOpen(), ' class="active"') ?>>
      // check for page "courses" and just echo the title
      <?php if($page->uid() == 'courses'): ?>
        <?php echo $page->title()->html() ?>
      // for all other pages wrap a link around the title
      <?php else: ?>
        <a href="<?php echo $page->url() ?>"><?php echo $p->title()->html() ?></a>
      <?php endif ?>
    </li>
  <?php endforeach ?>
</nav>

[emil]

Hello Kirby!
I’m also new to this, but i’m loving your product!
Like Kurtg i need to make my projects link not link to the projects page, but be clickable and show the submenu on click and hover. I could do this with a standard HTML menu and jquery, but i like to think there is a Kirby way. When trying to do this with the examples above it didn’t work. I’m no pro, rather a beginner, so i grant the mistake is mine. In the meantime I’m using the redirect method, which is ok but not desirable.

The structure of my site is the following:

-Home
-Projects: 1, 2, 3,
-contact

(projects should just work as the button for the actual projects.)

I followed the directions from tobiasweh literally, and tried to adjust it to my own menu, but to no success.

I hope you can help me out:)

[texnixe]

To show the submenu on click, you need some javascript that listens for the click event. The only Kirby specific part is filtering the menu items to determine which item should behave in what manner (that has been explained above). The rest needs to be solved with CSS and JS.

I’m not quite sure what you want to achieve on clicking the parent item: Open the submenu or link to a subpage?

@emil

Like Kurtg i need to make my projects link not link to the projects page, but be clickable and show the submenu on click and hover.

@emil

(projects should just work as the button for the actual projects.)

?

[emil]

Sorry about the confusion and thank you for such a quick respons!
I simply want to open the submenu

[texnixe]

You would need something like this:

//menu
<nav>
  <?php foreach($pages->visible() as $p): ?>
    <li <?php e($p->isOpen(), ' class="active"') ?>>
      // check for page "projects" and just echo the title
      <?php if($p->hasChildren()): ?>
        <span class="open-submenu"><?php echo $page->title()->html() ?><span>
         <ul class="submenu">
         <?php foreach($p->children() as $child): ?>
          <li><a href="<?php echo $child->url() ?>"><?php echo $child->title() ?></a></li>
         <?php endforeach ?>
        </ul>
      // for all other pages wrap a link around the title
      <?php else: ?>
        <a href="<?php echo $page->url() ?>"><?php echo $p->title()->html() ?></a>
      <?php endif ?>
    </li>
  <?php endforeach ?>
</nav>

And then you need your javascript event listener, something like:

$('.submenu').hide();
$('.open-submenu').click(function() {
  $('.submenu').slideToggle('slow');
});

[bbarclay]

Any idea how to make these pages not show up in the breadcrumbs too.

[lukasbestle]

What exactly are you trying to do?

[arjanv]

hi, this post is from 2015, and i have the same question. and as i read the solution is simple(not for me) so i assume this “simple” feature should be available from within the panel to set it easely, but i cannot find the setting. where is it?

Please help me out. thanks

[texnixe]

@arjanv

but i cannot find the setting. where is it?

There is no such setting. As explained above, there are multiple ways to go about this. One of these options would be an additional field in the blueprint for the page, that you can then query in your template.

So, this field needs to be added first, before you can use it.

[arjanv]

i love kirby, but it’s hard to understand it for me.

which files do i need to add the function? or why isn’t it baked into kirby, as it seems for you an easy thing to implement? seems a lot of people want this feature. If not, which files and which code i need to add?

thanks

[texnixe]

@arjanv

If not, which files and which code i need to add?

This I cannot tell you, because it depends on your content and template structure.

To use Kirby in any useful way, you do need to know the very basics, like what is a blueprint, template, snippet. How do I create a blueprint, add a field to it.

I’m sorry, but I cannot possibly repeat the documentation here in the forum.

You can find all about blueprints here:

Basic blueprint knowledge

Blueprints

and example blueprints: Samples | Kirby CMS

To just make an exception for a single page, see this example above: Can I make parent page menu item unclickable? - #5 by texnixe. But note that you have to replace visible with listed, since visible is deprecated, this is an old topic.

You do need a certain willingness to learn to code, if you want to use Kirby effectively. Kirby is not WordPress, you will not find any possible setting available out of the box.

[arjanv]

@texnixe

To just make an exception for a single page, see this example above: Can I make parent page menu item unclickable? - #5 by texnixe. But note that you have to replace visible with listed, since visible is deprecated, this is an old topic.

Okay, thank you. but in this example. which file/or folder i need to look to change/add this?

[texnixe]

site/blueprints/pages

If you are starting from a Starterkit, please see: Exploring the Starterkit | Kirby CMS

If you bought a theme, the structure might be different.