navigation

In my <nav> section, I'd like to indicate the current page. Currently I'm doing this by specifying a file in my frontmatter:

{
  "title": "Foo",
  "file": "foo"
}

---

And using file with a bit of JavaScript in my layout:

<nav>
  <ul>
    <a href='foo.html'><li>Foo</li></a>
    <a href='bar.html'><li>Bar</li></a>
    <a href='baz.html'><li>Baz</li></a>
  </ul>
</nav>
<script>
  document.querySelector('nav a[href="{{file}}.html"]').classList.add('active');
</script>

I wonder if there could be an easier way to deal with this that doesn't require any JavaScript.

Maybe using mustache instead of hairlip and automatically setting fileNames and currentFileName would allow for an elegant solution. But perhaps that's not super-simple anymore.

A small improvement that doesn't require the file in the frontmatter anymore:

<nav>
  <ul>
    <a href='foo.html'><li>Foo</li></a>
    <a href='bar.html'><li>Bar</li></a>
    <a href='baz.html'><li>Baz</li></a>
  </ul>
</nav>
<script>
  document.querySelector('nav a[href="' + location.pathname.split('/').reverse()[0] + '"]').classList.add('active');
</script>

but still needs some JS...

Navigation Menu

Repository navigation

navigation #5

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

navigation #5

Description

Activity

pekeler commented on Jul 1, 2015

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions