title: Is there a simple MVC4 html helper for collapsible (multi-level) Bootstrap 3 menus?
body: <p>I have seen <a href="https://stackoverflow.com/questions/6323021/better-way-to-get-active-page-link-in-mvc-3-razor/6323032#6323032">several</a> examples on creating a HTML helper method for <code>active</code> menu items.</p>
  
  <p><code>**Summary:**</code> Simply put, in an MVC project, using the Twitter Bootstrap, I am trying to preserve the open state of a collapsible menu when a child is selected.</p>
  
  <p>I am using a collapsible menu, where the parent's css (the selected item) needs to include <code>active open</code> if a child is selected.  This will ensure that the menu is open at the right location.  With the use of another HTML helper, the active item is already set to <code>active</code>.</p>
  
  <p>HTML for the menu:</p>
  
  <pre><code>    &lt;div id="sidebar"&gt;
          &lt;ul&gt;
              &lt;li class="active"&gt;&lt;a href="dashboard.html"&gt;&lt;i class="icon-home"&gt;&lt;/i&gt; &lt;span&gt;Dashboard&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="submenu"&gt;
                  &lt;a href="#"&gt;&lt;i class="icon-beaker"&gt;&lt;/i&gt; &lt;span&gt;UI Lab&lt;/span&gt; &lt;i class="arrow icon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="interface.html"&gt;Interface Elements&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="jquery-ui.html"&gt;jQuery UI&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="buttons.html"&gt;Buttons &amp;amp; icons&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="submenu"&gt;
                  &lt;a href="#"&gt;&lt;i class="icon-th-list"&gt;&lt;/i&gt; &lt;span&gt;Form elements&lt;/span&gt; &lt;i class="arrow icon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="form-common.html"&gt;Common elements&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="form-validation.html"&gt;Validation&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="form-wizard.html"&gt;Wizard&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="tables.html"&gt;&lt;i class="icon-th"&gt;&lt;/i&gt; &lt;span&gt;Tables&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="grid.html"&gt;&lt;i class="icon-th-list"&gt;&lt;/i&gt; &lt;span&gt;Grid Layout&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="submenu"&gt;
                  &lt;a href="#"&gt;&lt;i class="icon-file"&gt;&lt;/i&gt; &lt;span&gt;Sample pages&lt;/span&gt; &lt;i class="arrow icon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="invoice.html"&gt;Invoice&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="chat.html"&gt;Support chat&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="calendar.html"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="messages.html"&gt;Messages&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="charts.html"&gt;&lt;i class="icon-signal"&gt;&lt;/i&gt; &lt;span&gt;Charts &amp;amp; graphs&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="widgets.html"&gt;&lt;i class="icon-inbox"&gt;&lt;/i&gt; &lt;span&gt;Widgets&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the helper method for items:</p>
  
  <pre><code>    public static MvcHtmlString MenuItem(this HtmlHelper htmlHelper,
          string text,
          string action,
          string controller,
          string iconClass)
      {
          var li = new TagBuilder("li");
          var routeData = htmlHelper.ViewContext.RouteData;
          var currentAction = routeData.GetRequiredString("action");
          var currentController = routeData.GetRequiredString("controller");
          if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &amp;&amp;
              string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
          {
              li.AddCssClass("active");
          }
  
          var i = new TagBuilder("i");
          i.AddCssClass(iconClass);
  
          var basePath = HttpContext.Current.Request.Url.GetLeftPart(UriPartial.Authority);
  
          //li.InnerHtml = htmlHelper.ActionLink("&lt;i&gt;something&lt;/i&gt;" + text, action, controller).ToHtmlString();
          li.InnerHtml = htmlHelper.Raw(string.Format("&lt;a href=\"{0}/{1}/{2}\"&gt;&lt;i class=\"{4}\"&gt;&lt;/i&gt;{3}&lt;/a&gt;", basePath, controller, action, text, iconClass)).ToString();
  
          return MvcHtmlString.Create(li.ToString());
      }
  </code></pre>
  
  <p>And implemented like this:</p>
  
  <pre><code>        &lt;div id="sidebar"&gt;
              &lt;ul&gt;
                  @Html.MenuItem("Dashboard", "Index", "Dashboard", "icon-home")
  @*              &lt;li class="active"&gt;&lt;a href="dashboard.html"&gt;&lt;i class="icon-home"&gt;&lt;/i&gt; &lt;span&gt;Dashboard&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;*@
                  &lt;li class="submenu"&gt;
                      &lt;a href="#"&gt;&lt;i class="icon-beaker"&gt;&lt;/i&gt; &lt;span&gt;UI Lab&lt;/span&gt; &lt;i class="arrow icon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
  
                      &lt;ul&gt;
                          &lt;li&gt;@Html.MenuItem("Websites", "Index", "Websites", null)&lt;/li&gt;
                          &lt;li&gt;&lt;a href="jquery-ui.html"&gt;jQuery UI&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="buttons.html"&gt;Buttons &amp;amp; icons&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="submenu"&gt;
                      &lt;a href="#"&gt;&lt;i class="icon-th-list"&gt;&lt;/i&gt; &lt;span&gt;Form elements&lt;/span&gt; &lt;i class="arrow icon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="form-common.html"&gt;Common elements&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="form-validation.html"&gt;Validation&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="form-wizard.html"&gt;Wizard&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
  </code></pre>
  
  <p>So what I don't have is something for the submenu items.  </p>
  
  <p>Is there a simpler way of trying to accomplish this?</p>
  
  <p><strong>--UPDATE--</strong></p>
  
  <p>I'm guessing that putting this into a partial view may be best.  I need to find some way to preserve the selected item on click to reference it on every menu item, rather than check if the controller/action matches in order to set the current item to "active".  A controller method that activates on click, checks if the currently selected item is a parent or child, and if the parent matches a child, then format differently?  I'm sure there has to be an easier way.</p>