Adding the ability to make a dropdown menu.

_config.yml

@@ -8,7 +8,7 @@ ga_tracking_code: UA-139717412-2
 p2pu_ga_tracking_code: UA-55722824-1
 
 # Some files we need to exclude, so Github can build the site
-exclude: [Gemfile, Gemfile.lock, README.md]
+exclude: [Gemfile, Gemfile.lock, README.md, vendor]
 
 defaults:
   -

_data/course.yml

@@ -1,3 +1,12 @@
 title: Course-in-a-Box
 description: An open-source project for creating online courses, built by <a href="https://www.p2pu.org">P2PU</a>
-modules: ["setup", "content", "customize"]
+modules: ["setup", "content", "dropdown", "customize"]
+
+# Dropdown configurations (multiple allowed)
+dropdowns:
+  dropdown:
+    title: "Modules"
+    items: ["drop-down1-1","drop-down1-2"]
+
+
+

_includes/navigation.html

@@ -9,12 +9,47 @@
   <div class="navbar-collapse collapse" id="navbarSupportedContent">
     <ul class="navbar-nav">
       {% for module in site.data.course.modules %}
-       {% assign first_post = site.categories[module]|reverse|first %}
-       <li class="nav-item py-2{% if page.categories[1] == module %} active{% endif %}">
-         <a class="nav-link" href="{{ site.baseurl }}{{ first_post.url }}">
-           {{ module }}
-         </a>
-       </li>
+        {% if module == "dropdown" %}
+          <!-- Handle dropdown modules -->
+          {% for dropdown in site.data.course.dropdowns %}
+            {% assign dropdown_key = dropdown[0] %}
+            {% assign dropdown_config = dropdown[1] %}
+            {% assign dropdown_active = false %}
+            {% for dropdown_item in dropdown_config.items %}
+              {% if page.categories[1] == dropdown_item %}
+                {% assign dropdown_active = true %}
+                {% break %}
+              {% endif %}
+            {% endfor %}
+            <li class="nav-item dropdown py-2{% if dropdown_active %} active{% endif %}">
+              <a class="nav-link dropdown-toggle" href="#" id="{{ dropdown_key }}Dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {{ dropdown_config.title }}
+              </a>
+              <div class="dropdown-menu" aria-labelledby="{{ dropdown_key }}Dropdown">
+                {% for dropdown_item in dropdown_config.items %}
+                  {% assign first_post = site.categories[dropdown_item]|reverse|first %}
+                  {% if first_post %}
+                    <a class="dropdown-item{% if page.categories[1] == dropdown_item %} active{% endif %}" href="{{ site.baseurl }}{{ first_post.url }}">
+                      {{ dropdown_item }}
+                    </a>
+                  {% else %}
+                    <a class="dropdown-item" href="#">
+                      {{ dropdown_item }} <span class="text-muted">(No posts)</span>
+                    </a>
+                  {% endif %}
+                {% endfor %}
+              </div>
+            </li>
+          {% endfor %}
+        {% else %}
+          <!-- Regular menu item -->
+          {% assign first_post = site.categories[module]|reverse|first %}
+          <li class="nav-item py-2{% if page.categories[1] == module %} active{% endif %}">
+            <a class="nav-link" href="{{ site.baseurl }}{{ first_post.url }}">
+              {{ module }}
+            </a>
+          </li>
+        {% endif %}
       {% endfor %}
 <!--
       <li class="nav-item py-2">

_includes/next_module.html

@@ -1,16 +1,34 @@
 {% assign next=null %}
 {% assign prev=null %}
 {% assign temp=null %}
+{% assign all_modules = "" | split: "" %}
 
+<!-- Build flat list of all modules (including dropdown items) -->
 {% for m in site.data.course.modules %}
+  {% if m == "dropdown" %}
+    <!-- This is a dropdown module, add its children -->
+    {% for dropdown in site.data.course.dropdowns %}
+      {% assign dropdown_config = dropdown[1] %}
+      {% for dropdown_item in dropdown_config.items %}
+        {% assign all_modules = all_modules | push: dropdown_item %}
+      {% endfor %}
+    {% endfor %}
+  {% else %}
+    <!-- This is a regular module -->
+    {% assign all_modules = all_modules | push: m %}
+  {% endif %}
+{% endfor %}
+
+<!-- Find previous and next modules in the flat list -->
+{% for m in all_modules %}
 	{% if m == module and forloop.first != true %}
 		{% assign p = forloop.index0 | minus:1  %}
-		{% assign prev = site.data.course.modules[p] %}
+		{% assign prev = all_modules[p] %}
 		{% assign prev_post = site.categories[prev]|reverse|first %}
 	{% endif %}
 	{% if m == module and forloop.last != true %}
 		{% assign n = forloop.index0 | plus:1  %}
-		{% assign next = site.data.course.modules[n] %}
+		{% assign next = all_modules[n] %}
 		{% assign next_post = site.categories[next]|reverse|first %}
 	{% endif %}
 {% endfor %}

css/site.css

@@ -1 +1,45 @@
+/* Custom dropdown styling for course navigation */
+.navbar-nav .dropdown-menu {
+  border: none;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  margin-top: 0.125rem;
+  background-color: #515665; /* Match navbar bg-dark color */
+}
 
+.navbar-nav .dropdown-item {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  transition: background-color 0.15s ease-in-out;
+  color: rgba(255, 255, 255, 0.8); /* Match navbar text color */
+}
+
+.navbar-nav .dropdown-item:hover {
+  background-color: #707782; /* Match navbar hover color from _custom.scss */
+  color: white;
+}
+
+.navbar-nav .dropdown-item.active {
+  background-color: #007bff;
+  color: white;
+}
+
+.navbar-nav .dropdown-item.active:hover {
+  background-color: #0056b3;
+}
+
+/* Ensure dropdown caret is visible */
+.navbar-nav .dropdown-toggle::after {
+  margin-left: 0.5rem;
+}
+
+/* Make dropdown work on hover for desktop, click for mobile */
+@media (min-width: 768px) {
+  .navbar-nav .dropdown:hover .dropdown-menu {
+    display: block;
+  }
+
+  .navbar-nav .dropdown:hover .dropdown-toggle {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}

index.md

@@ -6,6 +6,7 @@ published: true
 Course-in-a-Box is a free tool for building and publishing online courses—no prior coding experience required. This guide was made using Course-in-a-Box, so what you see here is what you’ll start with. There are three modules that walk through the course creation process, all linked in the nav bar at the top of the page:
 * **[Setup](/modules/setup/getting-started/)** - Get your instance of Course-in-a-Box up and running
 * **[Content](/modules/content/markdown-and-media)** -  Update the course structure and add your copy & media
+* **[Dropdown](/modules/drop-down1-1/first-post/)** - Add additional content in a dropdown menu (optional)
 * **[Customize](/modules/customize/favicon)** - Add some (optional) finishing touches
 
 <br> 

modules/drop-down1-1/_posts/2000-01-01-first-post.md

@@ -0,0 +1,19 @@
+---
+title: First Post
+published: true
+---
+
+## Welcome to Drop-down 1-1
+
+This is the first post in the drop-down1-1 submodule. This content demonstrates how dropdown navigation works in Course-in-a-Box.
+
+You can add your content here using Markdown formatting.
+
+### Features
+
+- Dropdown navigation
+- Nested module structure
+
+### Next Steps
+
+Continue to the next section or explore other dropdown items from the navigation menu above.

modules/drop-down1-1/_posts/2000-01-02-second-post.md

@@ -0,0 +1,12 @@
+---
+title: Second Post
+published: true
+---
+
+## Second Section
+
+This is the second post in the drop-down1-1 submodule.
+
+### Content Goes Here
+
+Add your course content, images, videos, and other learning materials.

modules/drop-down1-2/_posts/2000-01-01-intro.md

@@ -0,0 +1,16 @@
+---
+title: Introduction to Drop-down 1-2
+published: true
+---
+
+## Drop-down 1-2 Module
+
+This is the introduction to the drop-down1-2 submodule.
+
+### Learning Objectives
+
+By the end of this module, you will:
+
+- Understand the dropdown navigation system
+- Know how to navigate between modules
+- Be familiar with the course structure