I've spent all day working on this and I've resolved it two minutes after posting!

Hi Fraser,

I need to implement a Bootstrap based site onto UMBRACO and have been scratching my head about the XSLT to add the navigation boostrap classes and attributes to the base SITEMAP XSLT. 

It sounds like you have got quite some way with this.

Would you be able to share your XSLT? I am not very experienced with XSLT and would really appreciate any assistane you could give on this.

Many thanks in advance,

Ben

Hi Ben,

It's not really my forte (I'm more of a front-end guy) but I used the following code to get the Boostrap navigation working the way I wanted to:

@using umbraco.MacroEngines
@inherits DynamicNodeContext

@{  var root = Model.AncestorOrSelf(); }
   

    @{ var homeSelected = Model.Level == 0 ? " class=\"active\"" : string.Empty; }

   
• @root.Name

    @foreach (var item in root.Children.Where("Visible"))

    {

        var selected = Array.IndexOf(Model.Path.Split(','), item.Id.ToString()) >= 0 ? " class=\"active\"" : string.Empty;

        var subItems = item.Descendants().Where("Visible");

        if (subItems.Count() > 0)

        {

           
• 
              @item.Name
             
  
             
  • @item.Name
  
  
              @foreach (var subItem in subItems)
  
  
              {
  
  
                 
  • @subItem.Name
  
  
              }
  
  
             
  
             

        }

        else

        {

           
• @item.Name

        }

    }

Not sure how it integrates (if at all) with Sitemap XSLT. You could try uBootstrap as I imagine this would be a much more integrated solution.

Hope this helps

Fraser

Thanks so much Fraser that is really helpful.

I have worked on another (non Umbraco) MVC project that uses Razor, so I should have recognised that your post wasn't XSLT!

Anyhow I have got that working nicely with my Bootstrap on Umbraco project.

Is there a setting that you know of to only show X number of levels below the home node. 

I would be tryning to achieve 1 > 1.1 > 1.1.1 but no deeper.

Any ideas?

Thanks again, 
Ben 

Hi Ben,

Have you tried changing the '0' value in the code here: if (subItems.Count() > 0)  ?

Fraser

Hi Fraser,

I didn't actually try that (yet)  but did achieve the effect that I was after with the following tweaks to your original code.

(I think we won't use data-toggle to expose the dropdowns - hover for now - so "repeating" the clicked link is not required in our instance so I commented out that)

Of course I know this now, but for anyone searching - this is an Umbraco Twitter Bootstrap Dropdown Navigation Razor Scripting File.

Thanks Fraser for your original post and subsequent help, if I had the KUDOS I give you a High Five!

Ben

@using umbraco.MacroEngines
@inherits DynamicNodeContext
@{  var root = Model.AncestorOrSelf(); }
<ul class="nav">
  @{ var homeSelected = Model.Level == 0 ? " class=\"active\"" : string.Empty; }
  <li @Html.Raw(homeSelected)><a href="@root.Url">@root.Name</a></li>
  
  @** NOT CERTAIN THE Level==2 IS REQUIRED **@
  @foreach (var item in root.Children.Where("Visible").Where("Level == 2"))
  
  {
  var selected =
  Array.IndexOf(Model.Path.Split(','), item.Id.ToString()) >= 0 ? 
  " class=\"active\"" : string.Empty; var subItems =
  item.Descendants().Where("Visible"); if (subItems.Count() > 0)
  {
  <li class="dropdown"> <a href="@item.Url" @** class="dropdown-toggle" data-toggle="dropdown" **@>@item.Name <b class="caret"></b></a>
    <ul class="dropdown-menu">
     
      @**  ONLY GOING TO USE THIS IF I DROPDOWN TOGGLE RATHER THAN HOVER - WOULD DUPLICATE LINK OTHERWISE
          <li><a href="@item.Url">@item.Name</a></li>   **@
   
         @** WHERE Level==3 LOADS ONLY THE CHILDREN OF THE 2nd LEVEL **@
      @foreach (var subItem in subItems.Where("Visible").Where("Level == 3"))
      {
      <li><a href="@subItem.Url">@subItem.Name</a></li>
      }
    </ul>
  </li>
  }
  else
  {
  <li @Html.Raw(selected)><a href="@item.Url">@item.Name</a></li>
  }
  }
</ul>

Ben,

Have you been found a solution to use xslt+bootstrap in your code? If you need I have.

(Sorry to my bad English)

is working on a reply...