Dynamicweb Bootstrap Navigation template

bootstrap.xslt

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <!--
  Bootstrap NavBar: http://getbootstrap.com/components/#navbar
  /* SHO 24/05/2014 14.34: Standard Twitter Bootstrap NavBar */
  Version: 0.9: Første implementering
  Example of template tag:
  <div class="dwnavigation" settings="template:bootstrap.xslt;fixed:true;"></div>-->
  <xsl:output encoding="utf-8" indent="yes" method="xml" omit-xml-declaration="yes"/>
  <xsl:param name="html-content-type"/>
  <xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ'"/>
  <xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyzæøå'"/>
  <!-- /*********** Custom menu settings START  ***********/ -->
  <xsl:variable name="settingFixed">
    <xsl:choose>
      <xsl:when test="translate(/NavigationTree/Settings/LayoutNavigationAttributes, $upper, $lower)='true'"/>
      <xsl:otherwise/>
    </xsl:choose>
  </xsl:variable>
  <!-- /*********** Custom menu settings END  ***********/ -->
  <!-- navbar-fixed-top -->
  <xsl:template match="/">
    <nav class="navbar-wrapper navbar-default{$settingFixed}" role="navigation">
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="/">
                <span class="glyphicon glyphicon-home"/>
                <xsl:value-of select="/NavigationTree/Settings/GlobalTags/Global.Area.Name"/>
              </a>
            </li>
            <xsl:apply-templates select="NavigationTree"/>
          </ul>
        </div>
        <xsl:comment>/.navbar-collapse</xsl:comment>
      </div>
    </nav>
  </xsl:template>
  <xsl:template match="NavigationTree">
    <xsl:apply-templates select="Page">
      <xsl:with-param name="depth" select="1"/>
    </xsl:apply-templates>
  </xsl:template>
  <xsl:template match="//Page">
    <xsl:param name="depth"/>
    <li>
      <xsl:if test="count(Page)&gt;0">
        <xsl:attribute name="class">dropdown</xsl:attribute>
      </xsl:if>
      <xsl:variable name="class">
        <xsl:if test="count(Page)&gt;0">dropdown-toggle </xsl:if>
      </xsl:variable>
      <a href="#">
        <xsl:if test="normalize-space($class)!=''">
          <xsl:attribute name="class">
            <xsl:value-of select="$class"/>
          </xsl:attribute>
        </xsl:if>
        <xsl:if test="count(Page)&gt;0">
          <xsl:attribute name="data-toggle">dropdown</xsl:attribute>
        </xsl:if>
        <xsl:attribute name="href">
          <xsl:value-of disable-output-escaping="yes" select="@FriendlyHref"/>
        </xsl:attribute>
        <xsl:value-of disable-output-escaping="yes" select="@MenuText"/>
        <xsl:if test="count(Page)&gt;0 and @AbsoluteLevel &lt;2">
          <b class="caret">
            <xsl:comment/>
          </b>
        </xsl:if>
      </a>
      <xsl:if test="count(Page)&gt;0">
        <xsl:variable name="dropdownClass">
          <xsl:choose>
            <xsl:when test="@AbsoluteLevel&gt;1">dropdown-submenu</xsl:when>
            <xsl:otherwise>dropdown-menu</xsl:otherwise>
          </xsl:choose>
        </xsl:variable>
        <ul class="{$dropdownClass} M{@AbsoluteLevel}">
          <xsl:apply-templates select="Page">
            <xsl:with-param name="depth" select="$depth+1"/>
          </xsl:apply-templates>
        </ul>
      </xsl:if>
    </li>
  </xsl:template>
</xsl:stylesheet>

bootstrapLevel2Plus.css

/* SHO 24/05/2014 17.04: bootstrapLevel2Plus.css You will need this if you have more than 2 navigation levels.
BS3 does not come with build in support for sub-menues at levels more than 2. */
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

This a go at a bootstrap version of the good old "li-clean.xslt" from Dynamicweb. It has an example HTML code at the top, and please note that it can be used together with settingslike "fixed:true" which of cause will output CSS so that the menu is positioned fixed at the top.
You can see example output at codepen.io