Caching Dynamic Menus

breadcrumb.html

<ol class="breadcrumb">
  <li data-id="1076"><a href="/" title="Home">Home</a></li>
  <li data-id="1122"><a href="/community/" title="Community">Community</a></li>
  <li class="active" data-id="1123">News</li>
</ol>

breadcrumbs.cshtml

@{ var selection = CurrentPage.Ancestors().Where("DocumentTypeAlias <> @0", "folder"); }

@if (selection.Any())
{
    <div class="content-header-breadcrumbs">
        <div class="container">
            <div class="row">
                <ol class="breadcrumb">                                       
                    @foreach (var item in selection.Where("TemplateId > 0").OrderBy("Level"))
                    {
                        <li data-id="@item.Id"><a href="@item.Url" title="@item.Title">@pageTitle</a></li>
                    }
                    <li class="active" data-id="@CurrentPage.Id">@CurrentPage.Title</li>
                </ol>
            </div>
        </div>
    </div>
}

login-snippet.html

<ul class="hidden">
    <li class="dropdown loginStatusReplace">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Test User<i class="fa fa-chevron-down " title=""></i></a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="/account">My Account</a></li>            
            <li class="divider"></li>
            <li><a href="/logout">Sign out</a></li>
        </ul>
    </li>
</ul>

menu.cshtml

<ul class="dropdown-menu sub-menu" role="menu">
    @foreach (var level3Page in l3Pages)
    {
        cssClass = "dropdown nav-" + level3Page.UrlName;
        <li class="@cssClass" role="presentation" data-id="@level3Page.Id">
            <a class="dropdown-toggle disabled" href="@level3Page.Url" title="@level3Page.Title" role="menuitem">&gt; @level3Page.Title</a>
        </li>
    }
</ul>

menu.html

<li class="dropdown nav-community" role="presentation" data-id="1122">
  <a href="/community/" title="Community" class="dropdown-toggle disabled" role="button" data-toggle="dropdown">
    Community <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li class="dropdown nav-news" role="presentation" data-id="1123">
      <a href="/community/news/" title="News" class="dropdown-toggle disabled" role="menuitem">News</a>
    </li>
  </ul>
</li>

script-login.js

$(function () {
    var replacement = $(".loginStatusReplace");
    if (!replacement.length) {
        return;
    }
    $(".loginStatus").replaceWith(replacement);
});

script.js

$(function () {
    $(".breadcrumb li").each(function() {
        var menuId = $(this).attr("data-id");
        var menuElementSelector = '.nav.navbar-nav li[data-id="' + menuId + '"]';
        $(menuElementSelector).addClass("selected active");
    });
});