Dropdown Menu without Children

[andreaballerino]

Hi,
I would like to know if there is the possibility of creating a navigation menu like this:
www.studiolegalevillani.com

A drop-down menu that shows pages (not children pages) that are not related to the main page, which actually does not exist, like this:

PRINCIPALI AREE DI INTERVENTO (this is not the parent page)

which shows first-level pages, such as:

/studiolegalevillani.com/condominio/

And not:

/studiolegalevillani.com/lo-studio/condominio/

Perhaps from the panel the user can decide which pages to insert with a toggle field for simple on / off or yes / no states.

Thanks for the help,
Andrea

[texnixe]

Yes, that’s possible.

A nested structure field in combination with a pages field is what I’d use.

[andreaballerino]

Thanks for your answer
I have a bit of difficulty implementing it, if I don’t ask too much, it would be possible to see a real example, it could also be useful for other forum users.

[texnixe]

How to control which parent menu items are shown?

I’d probably use a nested structure field to fully control the menu manually (with pages fields inside the structure) fields: type: fields headline: Menu fields: menu: type: structure fields: mainitem: label: Main Menu Item type: pages query: site.index # you can adapt this query to exclude pages that shouldn't appear in the main menu, like the error page or subpages etc…

[texnixe]

Let me know if you still have problems with setting this up.

[andreaballerino]

Hi Sonja,
Yes, I’ve some difficulties starting from scratch.

This is the navigation I would like to create:

<ul class="nav-list">
  <li><a href="/">Home</a></li>
  <li><a href="#">Studio Legale</a>
    <ul class="nav-dropdown">
      <li><a href="/lo-studio">Lo Studio</a></li>
      <li><a href="/settori-di-attivita">Settori di Attività</a></li>
      <li><a href="/consulenza-legale">Consulenza Legale</a></li>
      <li><a href="/faq">FAQs</a></li>
    </ul><!-- /nav-dropdown -->
  </li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/contatti">Contatti</a></li>
</ul><!-- /nav-list -->

Is possible to see a working example (navigation + blueprints) starting from here.

Many thanks for the help

[texnixe]

For this structure we don’t even need a nested structure, but a structure field with two pages fields. The first level field can have only one page, the secondlevel is optional and can have multiple pages.

Blueprint setup:

sections:
      fields:
        type: fields
        headline: Custom menu
        fields:
          menu:
            type: structure
            fields:
              firstLevel:
                label: Main Menu Item
                type: pages
                max: 1
              hasSubmenu:
                type: toggle
                text: Add a submenu
              secondLevel:
                  label: Child Menu Item
                  type: pages
                  when:
                    hasSubmenu: true

The toggle field is not necessary but helps keep your form clean, so that the second field is not shown if the editor doesn’t want to add submenu items to a main entry.

In your template:

<?php $menu = $site->menu()->toStructure(); ?>
<?php if ($menu->isNotEmpty()) : ?>
<ul class="nav-list">
  <?php foreach ($menu as $item): ?>
    <?php if ($mainMenuItem = $item->firstLevel()->toPage()) : ?>
      <li><a href="<?= $mainMenuItem->url() ?>"><?= $mainMenuItem->title() ?></a>
      <?php endif ?>
      <?php $subMenu = $item->secondLevel()->toPages(); ?>
      <?php if ($subMenu->isNotEmpty()) : ?>
        <ul class="nav-dropdown">
          <?php foreach ($subMenu as $subItem) : ?>
              <li><a href="<?= $subItem->url() ?>"><?= $subItem->title() ?></a></li>
          <?php endforeach ?>
        </ul><!-- /nav-dropdown -->
      </li>
      <?php endif ?>
      <?php endforeach ?>
</ul><!-- /nav-list -->

[andreaballerino]

Hi Sonja,
Thank you

I tried but I still get a syntax error.

[texnixe]

Oh, sorry, I forgot to copy the final endif when pasting the code:

<?php $menu = $site->menu()->toStructure(); ?>
<?php if ($menu->isNotEmpty()) : ?>
<ul class="nav-list">
  <?php foreach ($menu as $item): ?>
    <?php if ($mainMenuItem = $item->firstLevel()->toPage()) : ?>
      <li><a href="<?= $mainMenuItem->url() ?>"><?= $mainMenuItem->title() ?></a>
      <?php endif ?>
      <?php $subMenu = $item->secondLevel()->toPages(); ?>
      <?php if ($subMenu->isNotEmpty()) : ?>
        <ul class="nav-dropdown">
          <?php foreach ($subMenu as $subItem) : ?>
              <li><a href="<?= $subItem->url() ?>"><?= $subItem->title() ?></a></li>
          <?php endforeach ?>
        </ul><!-- /nav-dropdown -->
      </li>
      <?php endif ?>
      <?php endforeach ?>
</ul><!-- /nav-list -->
<?php endif ?>

[andreaballerino]

Thank you very much Sonja, now it works.

I am very happy

I hope it’s useful for other users.

[texnixe]

I’m currently writing a cookbook recipe with this example and others.

[andreaballerino]

Thanks, it’s very useful to see real examples.

[texnixe]

Menu builders