Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save atelierbram/ac8453fec7145e6bba011f6448fd4fda to your computer and use it in GitHub Desktop.
Save atelierbram/ac8453fec7145e6bba011f6448fd4fda to your computer and use it in GitHub Desktop.
Jigsaw Static Site - Set active class in navigation menu

Jigsaw Static Site - Set active class in navigation menu

Set a custom front matter variable "slug" in top of your post.blade.md file which is the same as the filename, here: this-post-example.blade.md

---
extends: _layouts.post
section: content
title: This Post Example
slug: this-post-example

---

In config.php:

<?php
use Illuminate\Support\Str;

return [
  'isActive' => function ($page, $path) {
    return Str::endsWith(trimPath($page->getPath()), trimPath($path));
  },
];

In source/_partials/nav.blade.php:

<nav class="nav" id="nav">
  <ul class="nav_list" id="navList">
    <li><a href="{{ $page->baseUrl }}/">home</a></li>
    @foreach ($posts as $post)
    <li><a href="{{ $post->getUrl() }}" class="nav_list_link @if ($post->slug  === $page->getFilename()) active @endif">{{ $post->title }}</a></li>
    @endforeach
  </ul>
</nav>

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment