An interesting option could be considered to enrich the navigation of the website, is to instruct Grav to render the blog posts categories in the main menu of our blog.

Those entries will be placed after the links automatically generated by the CMS, when it renders the navigation menu for our blog.

In this way the user can click on a category and get only the posts which belong that specific category.

This kind of scenario can bring two major benefits to your blog: having a better navigation through the web site and, therefore, increasing the User Experience, giving to our visitor a better view about the topics we cover in our blog.

To carry out this task, we can leverage the taxonomylist plugin, included by default in a standard Grav CMS distribution.

The first step is to locate the template assigned to render the navigation menu, because it obviously changes on each single theme, then we can add the following snippet at the end of the code that renders the navigation menu:

{% set taxlist = taxonomylist.get() %}
{% if taxlist %}
    {% for tax,value in taxlist['category'] %}
    <li>
        <a href="{{ base_url }}/category{{ config.system.param_sep }}{{ tax|e('url') }}">{{ tax|capitalize }}</a>
    </li>
    {% endfor %}
{% endif %}

Let's examine it in detail. The first instruction gets the taxonomy object from the taxonomylist object, which comes from the namesake plugin, and assigns it to the taxlist variable:

{% set taxlist = taxonomylist.get() %}

When the object is set, it gets the categories - taxlist['category'] - and cycles over them:

{% if taxlist %}
    {% for tax,value in taxlist['category'] %}
        [...]
    {% endfor %}
{% endif %}

Inside that cycle, the menu links are rendered and the displayed value is capitalized:

<li>
    <a href="{{ base_url }}/category{{ config.system.param_sep }}{{ tax|e('url') }}">{{ tax|capitalize }}</a>
</li>

This last instruction can slightly change, according with the theme you are currently using.

This chunk of code works perfectly but it lacks an important part: it does not activate the link in the navigation menu that corresponds the active page.

This step can be carried out by getting the current page's category from the Uri object:

{% set category = grav.uri.params("category", true) %}

It's now trivial to compare it with the current cycled category:

{% set current_page = (tax == category) ? 'active' : '' %}

You may need to use a different class than active, according with the theme you are currently using.

Here's the full code with this trick:

{% set taxlist = taxonomylist.get() %}
{% if taxlist %}
    {% set category = grav.uri.params("category", true) %}
    {% for tax,value in taxlist['category'] %}
    {% set current_page = (tax == category) ? 'active' : '' %}
    <li class="{{ current_page }}">
        <a href="{{ base_url }}/category{{ config.system.param_sep }}{{ tax|e('url') }}">{{ tax|capitalize }}</a>
    </li>
    {% endfor %}
{% endif %}

In the end, this is the code we can add to [Antimatter](http://demo.getgrav.org/blog-skeleton/) theme navigation menu, to show the blogs categories. We will add our snippet code into the navigation.html.twig template, placed under the antimatter/templates/partials/ folder:

<ul class="navigation">
    {% if theme_config.dropdown.enabled %}
        {{ _self.loop(pages) }}
    {% else %}
        {% for page in pages.children.visible %}
            {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
            <li class="{{ current_page }}">
                <a href="{{ page.url }}">
                    {% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
                    {{ page.menu }}
                </a>
            </li>
        {% endfor %}
    {% endif %}
    {% for mitem in site.menu %}
        <li>
            <a href="{{ mitem.url }}">
                {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
                {{ mitem.text }}
            </a>
        </li>
    {% endfor %}

    {% set taxlist = taxonomylist.get() %}
    {% if taxlist %}
        {% set category = grav.uri.params("category", true) %}
        {% for tax,value in taxlist['category'] %}
        {% set current_page = (tax == category) ? 'active' : '' %}
        <li class="{{ current_page }}">
            <a href="{{ base_url }}/category{{ config.system.param_sep }}{{ tax|e('url') }}">{{ tax|capitalize }}</a>
        </li>
        {% endfor %}
    {% endif %}
</ul>

Be sure to correctly override the template, avoiding to add your custom code directly to the Antimatter theme, as well explained in this post on Grav web site blog.

Next Post

Related Posts