Development

Navigation With Current Page Highlighting

Add navigation links to a data file in _data/navigation.yml:

# Menu navigation links

- title: Home
  url: /

- title: Blog
  url: /blog/

Create _includes/navigation.html file:

{% for link in site.data.navigation %}
    {% if link.url contains 'http' %}
        {% assign domain = '' %}
    {% else %}
        {% assign domain = relative_url %}
    {% endif %}
    {% if link.url == page.url %}
        {% assign current = ' class="uk-active"' %}
    {% else %}
        {% assign current = null %}
    {% endif %}
    {% if link.title %}
        <li{{ current }}><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank" {% endif %}>{{ link.title }}</a></li>
    {% endif %}
{% endfor %}

Related Posts

Hugo

The Ultimate Guide to Choosing and Customizing Hugo Themes

Unleashing the power of Hugo static generator for your website.

Hugo

Unlock the Potential of Your Hugo Blog

Delve deeper into the world of Hugo blog themes and how to get started fast.