topnav.html

<header class="navbar navbar-expand-lg navbar-dark bg-primary -navbar">
    <div class="container navbar-container">
        <a class="navbar-brand" href="{{ site.baseurl }}/">
            <h1>Development Containers</h1>
        </a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse collapse" id="navbarSupportedContent" role="navigation" aria-label="Top Level">
            {% assign sorted = site.implementors | sort: 'index' %}
            <ul class="navbar-nav ml-auto">
                <li {% if page.sectionid=='howItWorks' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/overview" | prepend: site.baseurl }}'>Overview</a>
                </li>
                <!--<li {% if page.sectionid=='implementors' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href="{{ sorted.first.url | prepend: site.baseurl }}">Implementations</a>
                </li>-->
                <li {% if page.sectionid=='metadata' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href="{{ "/implementors/json_reference" | prepend: site.baseurl }}">Reference</a>
                </li>
                <li {% if page.sectionid=='implementors' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href="{{ sorted.first.url | prepend: site.baseurl }}">Specification</a>
                </li>
                <li {% if page.sectionid=='supporting' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/supporting" | prepend: site.baseurl }}'>Supporting Tools</a>
                </li>
                <li {% if page.sectionid=='guides' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/guides" | prepend: site.baseurl }}'>Guides</a>
                </li>
                <li {% if page.sectionid=='features' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/features" | prepend: site.baseurl }}'>Available Features</a>
                </li>
                <li {% if page.sectionid=='features' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/templates" | prepend: site.baseurl }}'>Available Templates</a>
                </li>
                <li {% if page.sectionid=='collections' %} class="nav-item active" {% else %} class="nav-item" {% endif %}>
                    <a class="nav-link" href='{{ "/collections" | prepend: site.baseurl }}'>Collections</a>
                </li>
            </ul>
        </div>

    </div>
</header>