Ampersand in Log1x Nav menu being printed as Entity

sage
1

In a Sage 10 menu, an item has an Ampersand in it: Schedule & Pricing, but it’s getting printed to the page (and displaying as) Schedule & Pricing.

Am thinking this is because of the example code I lifted from Log1x for tailwinds mobile menu:

@if ($navigation)
<nav class="shadow-lg">
  <div class="max-w-6xl mx-auto px-4 md:h-full">
    <div class="flex md:h-full"><!-- doesnt work justify-items-end, use flex-end-->
      <div class="flex space-x-7">
        <ul class="hidden md:flex items-center space-x-1">
          @foreach ($navigation as $item)
            <li class="py-4 px-2 md:px-3 text-white semi-bold {{ $item->classes ?? '' }} {{ $item->active ? 'active' : '' }}">
              <a href="{{ $item->url }}" class="transition hover:text-jagPink md:text-lg">
                {{ $item->label }}
              </a>

              @if ($item->children)
                <ul class="hidden md:flex items-center space-x-3 ">
                  @foreach ($item->children as $child)
                    <li class="py-2 px-2 font-medium text-white rounded hover:bg-green-500 hover:text-white transition duration-300 {{ $child->classes ?? '' }} {{ $child->active ? 'active' : '' }}">
                      <a href="{{ $child->url }}">
                        {{ $child->label }}
                      </a>
                    </li>
                  @endforeach
                </ul>
              @endif
            </li>
          @endforeach
        </ul>
      </div>

        <!-- Mobile menu button -->
        <div class="md:hidden flex items-center mt-2">
          <button class="outline-none mobile-menu-button">
          <svg class=" w-6 h-6 text-white hover:text-green-500 "
            x-show="!showMenu"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- mobile menu -->
  <div class="hidden mobile-menu">
    <ul class="">
    @foreach ($navigation as $item)
        <li class="py-4 px-2 border-b-4 border-white font-semibold {{ $item->classes ?? '' }} {{ $item->active ? 'active' : '' }}">
          <a href="{{ $item->url }}" class="text-white transition hover:text-red">
            {{ $item->label }}
          </a>

          @if ($item->children)
            <ul class="hidden md:flex items-center space-x-3 ">
              @foreach ($item->children as $child)
                <li class="py-2 px-2 font-medium text-gray-500 rounded hover:bg-green-500 hover:text-white transition duration-300 {{ $child->classes ?? '' }} {{ $child->active ? 'active' : '' }}">
                  <a href="{{ $child->url }} " class="text-white transition hover:text-jagPink">
                    {{ $child->label }}
                  </a>
                </li>
              @endforeach
            </ul>
          @endif
        </li>
      @endforeach
    </ul>
  </div>
</nav>

<script>
  const btn = document.querySelector("button.mobile-menu-button");
  const menu = document.querySelector(".mobile-menu");
  btn.addEventListener("click", () => {
    console.log("clicked, yo.");
    menu.classList.toggle("hidden");
  });
</script>
@endif

Thinking maybe I need to throw one of the html entity utilities around child->label, but not sure.

Hoping for a pointer. Thanks much.

2

Well, right or wrong, html_entity_decode($child->label) did the trick.

Interestingly, locally, the raw & in the menu item displayed correctly in the first place.

3

This is likely happening because you’re using {{ $variable }} which automatically escapes output with htmlspecialchars. If you use {{! $variable !}} it won’t escape the data (although take care as the escaping is done for security purposes).

1 Like
4

Well, right or wrong, html_entity_decode($child->label) did the trick.

Interestingly, locally, the raw & in the menu item displayed correctly in the first place.

Thanks (as always). Note, it’s a double (not single) exclamation point:

Hello, {!! $name !!}.