Menu item needs to have a star next to it

I want to show a star next to certain menu items. It would only be for select ones. Can anybody point me in the direction of how to setup this functionality so it’s controllable from the panel. We want it to show before the title if the user puts that in the content.

Sure :slight_smile:

In your site/blueprints/default.yml and any other page you like this option to show up in panel, you could add a simple checkbox field:

title: Page
pages: true
files: true
fields:
  title:
    label: Title
    type:  text
  star:
    label: Highlight
    text:  Highlight this page with a star in menu?
    type:  checkbox
  text:
    label: Text
    type:  textarea

Then in your site/snippets/menu.php

<nav role="navigation">

  <ul class="menu cf">
    <?php foreach($pages->visible() as $p): ?>
    <li>
      <a <?php e($p->isOpen(), ' class="active"') ?> href="<?php echo $p->url() ?>"><?php e($p->star()->isTrue(), '★ ') ?><?php echo $p->title()->html() ?></a>

      <?php if($p->hasVisibleChildren()): ?>
      <ul class="submenu">
        <?php foreach($p->children()->visible() as $p): ?>
        <li>
          <a href="<?php echo $p->url() ?>"><?php e($p->star()->isTrue(), '★ ') ?><?php echo $p->title()->html() ?></a>
        </li>
        <?php endforeach ?>
      </ul>
      <?php endif ?>

    </li>
    <?php endforeach ?>
  </ul>

</nav>

…or if you want a bit more control over it with css you can wrap it in a span and give it a class, like so:

<nav role="navigation">

  <ul class="menu cf">
    <?php foreach($pages->visible() as $p): ?>
    <li>
      <a <?php e($p->isOpen(), ' class="active"') ?> href="<?php echo $p->url() ?>">
        <?php if($p->star()->isTrue()): ?>
          <span class="star">★</span>
        <?php endif ?>
        <?php echo $p->title()->html() ?>
      </a>

      <?php if($p->hasVisibleChildren()): ?>
      <ul class="submenu">
        <?php foreach($p->children()->visible() as $p): ?>
        <li>
          <a href="<?php echo $p->url() ?>">
            <?php if($p->star()->isTrue()): ?>
              <span class="star">★</span>
            <?php endif ?>
            <?php echo $p->title()->html() ?>
          </a>
        </li>
        <?php endforeach ?>
      </ul>
      <?php endif ?>

    </li>
    <?php endforeach ?>
  </ul>

</nav>

An alternative would be to apply the class to the anker element and then add the star via CSS using the :before pseudo element.

1 Like

True, I’d pick that one in this case :thumbsup: