navbar-template.html

<nav class="navbar navbar-expand-lg navbar-light fixed-top">
    <a class="navbar-brand" href="index.html">
        <img src="images/global/loopback-full-logo-blue.svg" width=150px>
    </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="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="/getting-started.html">Getting Started</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/doc/en/lb4">Docs</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/contribute.html">Contribute</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/resources.html">Resources</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://strongloop.com/strongblog/tag_LoopBack.html" target="_blank" rel="noopener noreferrer">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://github.com/strongloop/loopback-next" target="_blank" rel="noopener noreferrer">
                    <i class="fa fa-github fa-lg"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://twitter.com/strongloop" target="_blank" rel="noopener noreferrer">
                    <i class="fa fa-twitter fa-lg"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://join.slack.com/t/loopbackio/shared_invite/zt-8lbow73r-SKAKz61Vdao~_rGf91pcsw" target="_blank" rel="noopener noreferrer">
                    <i class="fa fa-slack fa-lg"></i>
                </a>
            </li>
        </ul>
    </div>
</nav>
<script>
$(document).ready(function ($) {
    var url = window.location.href;
    var activePage = url;
    $('.nav a').each(function () {
        var linkPage = this.href;
        if (activePage == linkPage) {
            $(this).closest("li").addClass("active");
        }
    });
});
</script>