Merge pull request #304 from PetrDlouhy/bootstrap5

add bootstrap5 templates

docs/source/templatesmod.rst

@@ -14,6 +14,12 @@ Nevertheless pay attention that menu template also uses two CSS classes marking
   * **current_item** — marks item in the tree, corresponding to current page;
   * **current_branch** — marks all ancestors of current item, and current item itself.
 
+If needed, you can set extra CSS classes to the *ul* element with `extra_class_ul` variable. For example::
+
+  {% with extra_class_ul="flex-wrap flex-row" %}
+     {% sitetree_menu from "footer_3" include "trunk,topmenu" template "sitetree/menu_bootstrap5.html" %}
+  {% endwith %}
+
 
 .. _overriding-built-in-templates:
 
@@ -125,7 +131,11 @@ The following templates are bundled with SiteTree:
 
   * `sitetree/menu_bootstrap4.html`
 
-   The same as above but for Bootstrap version 3.
+   The same as above but for Bootstrap version 4.
+
+  * `sitetree/menu_bootstrap5.html`
+
+   The same as above but for Bootstrap version 5.
 
  * `sitetree/menu_bootstrap_dropdown.html`
 
@@ -139,6 +149,10 @@ The following templates are bundled with SiteTree:
 
    The same as above but for Bootstrap version 4.
 
+ * `sitetree/menu_bootstrap5_dropdown.html`
+
+   The same as above but for Bootstrap version 5.
+
  * `sitetree/menu_bootstrap_navlist.html`
 
    This template can be used to construct a Bootstrap Nav list.

sitetree/templates/sitetree/menu_bootstrap.html

@@ -1,5 +1,5 @@
 {% load sitetree %}
-<ul class="nav">
+<ul class="nav {{ extra_class_ul }}">
     {% for item in sitetree_items %}
         <li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% endif %}">
             <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}>

sitetree/templates/sitetree/menu_bootstrap3.html

@@ -1,5 +1,5 @@
 {% load sitetree %}
-<ul class="nav navbar-nav">
+<ul class="nav navbar-nav {{ extra_class_ul }}">
     {% for item in sitetree_items %}
         <li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% endif %}">
             <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}>

sitetree/templates/sitetree/menu_bootstrap4.html

@@ -1,5 +1,5 @@
 {% load sitetree %}
-<ul class="navbar-nav mr-auto">
+<ul class="navbar-nav mr-auto {{ extra_class_ul }}">
     {% for item in sitetree_items %}
         <li class="nav-item {% if item.has_children %}dropdown{% endif %}">
             <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" class="nav-link {% if item.is_current or item.in_current_branch %}active{% endif %} {% if item.has_children %}dropdown-toggle" aria-haspopup="true" id="navitem-{{ item.id }}" data-toggle="dropdown{% endif %}">

sitetree/templates/sitetree/menu_bootstrap5.html

@@ -0,0 +1,13 @@
+{% load sitetree %}
+<ul class="navbar-nav mr-auto {{ extra_class_ul }}">
+    {% for item in sitetree_items %}
+        <li class="nav-item {% if item.has_children %}dropdown{% endif %}">
+            <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" class="nav-link {% if item.is_current or item.in_current_branch %}active{% endif %} {% if item.has_children %}dropdown-toggle" aria-haspopup="true" id="navitem-{{ item.id }}" data-bs-toggle="dropdown{% endif %}">
+                {{ item.title_resolved }}
+            </a>
+            {% if item.has_children %}
+                {% sitetree_children of item for menu template "sitetree/menu_bootstrap5_dropdown.html" %}
+            {% endif %}
+        </li>
+    {% endfor %}
+</ul>

sitetree/templates/sitetree/menu_bootstrap5_dropdown.html

@@ -0,0 +1,6 @@
+{% load sitetree %}
+<div class="dropdown-menu" aria-labelledby="navitem-{{ item.id }}">
+    {% for item in sitetree_items %}
+        <a class="dropdown-item {% if item.is_current or item.in_current_branch %}active{% endif %}" href="{% sitetree_url for item %}" {% if item.hint %}title="{{ item.hint }}"{% endif %}>{{ item.title_resolved }}</a>
+    {% endfor %}
+</div>

sitetree/templates/sitetree/menu_foundation.html

@@ -1,5 +1,5 @@
 {% load sitetree %}
-<ul class="nav-bar">
+<ul class="nav-bar {{ extra_class_ul }}">
 	{% for item in sitetree_items %}
 	<li class="{% if item.is_current or item.in_current_branch %}active{% endif %} {% if item.has_children %}has-flyout{% endif %}">
         <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}">{{ item.title_resolved }}</a>