GUI Nav Builder

Kirby 3 Solved ✅
1

Hello,

I know there was a similar issue in 2016, but time has passed and things changed, so I wanted to know if there is a nice way to build a navigation in the admin panel.

Regards
Andi

2

I wouldn’t say its an issue as such - Kirby provides many custom fields that are powerful and can be used for many purposes. You can use nested structure fields to create a menu that can be edited from within the panel.

3

A nested structure field is the best option. Inside the nested structure, use a pages field.

See example here: How to control which parent menu items are shown?

The only downside is that you would have to define in advance how many levels your navigation should have.

4

Thanky for your answers. I’ll try these approaches.

5

For cases where you want an option to also include external URLs in your menu, you might want to check out the Link field and use that within your structure instead of the pages field.

6

Oh lord, I wish I would have seen this just a few hours earlier – I did this laughably convoluted menu snippet this afternoon:

menu:
        label: Menu
        type: structure
        fields:
          name:
            label: Name
            type: text
            width: 3/3
          linkType:
            label: Type
            type: radio
            options:
              internal: Internal
              external: External
            width: 1/3
          internalLink:
            label: Internal Link
            type: pages
            width: 1/3
          externalLink:
            label: External Link
            type: url
            width: 1/3

<ul>
  <?php $menu = $site->menu()->toStructure(); ?>
  <?php foreach ($menu as $menuItem): ?>

    <?php if ($menuItem->linkType() == "internal"): ?>
      <?php $link = $site->url() . "/" . $menuItem->internallink()->value()[0]; ?>
      <?php $typeClass = 'internal'; ?>
    <?php else: ?>
      <?php $link = $menuItem->externallink(); ?>
      <?php $typeClass = 'external'; ?>
    <?php endif; ?>

      <li>
        <a href="<?php echo $link; ?>" class="<?= $typeClass; ?>">
        <?php echo $menuItem->name(); ?>
        </a>
      </li>

  <?php endforeach; ?>
</ul>

fml – gonna redo it using the suggested plugin :smiley:

7

…updated using link field plugin mentioned by texnixe above

<ul>
  <?php $menu = $site->menu()->toStructure(); ?>
  <?php foreach ($menu as $menuItem): ?>

      <li>
        <a href="<?= $menuItem->button()->toHref(); ?>">
        <?php echo $menuItem->name(); ?>
        </a>
      </li>

  <?php endforeach; ?>
</ul>

menu:
        label: Menu
        type: structure
        fields:
          name:
            label: Name
            type: text
            width: 3/3
          button:
            label: Link
            type: link
            width: 3/3
            options:
              - page
              - url