JavaScriptServices/templates/KnockoutSpa/ClientApp/components/nav-menu/nav-menu.html

<div class='main-nav'>
        <div class='navbar navbar-inverse'>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a class='navbar-brand' href='/'>WebApplicationBasic</a>
        </div>
        <div class='clearfix'></div>
        <div class='navbar-collapse collapse'>
            <ul class='nav navbar-nav'>
                <li>
                    <a class='navbar-brand' href='/' data-bind='css: { active: route().page === "home-page" }'>
                        <span class='glyphicon glyphicon-home'></span> Home
                    </a>
                </li>
                <li>
                    <a class='navbar-brand' href='/counter' data-bind='css: { active: route().page === "counter-example" }'>
                        <span class='glyphicon glyphicon-education'></span> Counter
                    </a>
                </li>
                <li>
                    <a class='navbar-brand' href='/fetch-data' data-bind='css: { active: route().page === "fetch-data" }'>
                        <span class='glyphicon glyphicon-th-list'></span> Fetch data
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>