NEW: Dropdown links in header

docs/conf.py

@@ -91,18 +91,19 @@
         version_match = "v" + release
 
 html_theme_options = {
-    "external_links": [
+    "dropdown_links": [
         {
-            "url": "https://pydata.org",
-            "name": "PyData",
-        },
-        {
-            "url": "https://numfocus.org/",
-            "name": "NumFocus",
+            "url": "https://github.com/pydata/pydata-sphinx-theme/releases",
+            "name": "Changelog",
         },
+        {"url": "examples/gallery", "name": "Gallery"},
         {
-            "url": "https://numfocus.org/donate",
-            "name": "Donate to NumFocus",
+            "name": "Community links",
+            "items": [
+                {"url": "https://pydata.org", "name": "PyData"},
+                {"url": "https://numfocus.org/", "name": "NumFocus"},
+                {"url": "https://numfocus.org/donate", "name": "Donate to NumFocus"},
+            ],
         },
     ],
     "github_url": "https://github.com/pydata/pydata-sphinx-theme",

docs/index.md

@@ -63,9 +63,3 @@ Several example pages to demonstrate the functionality of this theme when used a
 
 examples/index
 ```
-
-```{toctree}
-:hidden:
-
-Changelog <https://github.com/pydata/pydata-sphinx-theme/releases>
-```

src/pydata_sphinx_theme/assets/styles/sections/_header.scss

@@ -90,10 +90,17 @@
 
     // Dropdowns for the extra links
     .dropdown {
-      button {
+      // The button that people click on
+      > button {
         display: unset;
         color: var(--pst-color-text-muted);
         border: none;
+
+        &:hover,
+        &:active,
+        &:focus {
+          color: var(--pst-color-primary);
+        }
       }
 
       .dropdown-menu {

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/dropdown-links.html

@@ -0,0 +1,44 @@
+{# One or more extra links and dropdown links with Bootstrap -#}
+
+{# A macro so we can save some boilerplate #}
+{%- macro dropdown_link(name, url, tooltip_placement="left") -%}
+
+{#- Parse the URL to determine if it is an internal document link or a URI #}
+{% if not url.startswith("http") %}
+{% set url=pathto(url) %}
+{% set extra_classes="" %}
+{% else %}
+{% set extra_classes=" nav-external" %}
+{% endif -%}
+
+<a class="nav-link{{ extra_classes }}" href="{{ url }}" data-bs-toggle="tooltip" data-bs-placement="{{ tooltip_placement }}" aria-label="{{ name }}">
+  {{ name }}
+</a>
+{%- endmacro %}
+
+{% if theme_dropdown_links %}
+{% for dropdown in theme_dropdown_links %}
+
+  {#- If "items" is in the list item then it is a dropdown with a collection of links #}
+  {% if "items" in dropdown %}
+  <div class="nav-item dropdown">
+    <button class="btn dropdown-toggle nav-item" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ dropdown["name"] }}
+    </button>
+    <div class="dropdown-menu">
+    {% for link in dropdown["items"] %}
+    <li class="nav-item">
+      {{ dropdown_link(link["name"], link["url"])}}
+    </li>
+    {% endfor %}
+    </div>
+  </div>
+
+  {% else %}
+  {# Otherwise assume it is just an extra link, not a dropdown -#}
+  <li class="nav-item">
+    {{ dropdown_link(dropdown["name"], dropdown["url"])}}
+  </li>
+  {% endif %}
+{% endfor %}
+{% endif %}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-first-level-links.html

@@ -0,0 +1 @@
+{{ generate_header_nav_html(n_links_before_dropdown=theme_header_links_before_dropdown) }}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/navbar-nav.html

@@ -6,6 +6,7 @@
     {{ _("Site Navigation") }}
   </p>
   <ul id="navbar-main-elements" class="navbar-nav">
-    {{ generate_header_nav_html(n_links_before_dropdown=theme_header_links_before_dropdown) }}
+    {% include "components/navbar-first-level-links.html" %}
+    {% include "components/dropdown-links.html" %}
   </ul>
 </nav>

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/theme.conf

@@ -11,6 +11,7 @@ sidebarwidth = 270
 sidebar_includehidden = True
 use_edit_page_button = False
 external_links =
+dropdown_links =
 bitbucket_url =
 github_url =
 gitlab_url =