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
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