add bottom-border option (bottom divider)

Author: IzaakWN

README.md

@@ -91,6 +91,7 @@ Each link in the `links` list supports:
 - `text` (string, required): The text displayed for the link
 - `url` (string, optional): The URL the link points to (not needed if using `submenu`)
 - `target` (string, optional): The target attribute (e.g., `_blank` for new tab)
+- `bottom-border` (bool or int, optional): Add bottom divider of width 1px if true, or given value in px if number
 - `submenu` (list, optional): List of nested links for a submenu (see Nested Dropdowns below)
 
 ## Example: Using Shared Config File

USAGE.md

@@ -108,6 +108,7 @@ Each link in the `links` list supports:
 | `text` | string | Yes | The link text |
 | `url` | string | Conditional | The target URL (can be relative or absolute). Required unless `submenu` is provided. Optional when using `submenu` to make the parent clickable. |
 | `target` | string | No | HTML target attribute (e.g., `_blank` for new tab) |
+| `bottom-border` | bool or int | No | Add bottom divider of width 1px if true, or given value in px if number |
 | `submenu` | list | No | List of nested links (creates a submenu). See Nested Dropdowns below. |
 
 ## Advanced Examples

mkdocs_header_dropdown/plugin.py

@@ -35,6 +35,34 @@ class HeaderDropdownPlugin(BasePlugin):
         ('dropdowns', config_options.Type(list, default=[])),
     )
 
+    def _normalize_links(self, links):
+        """
+        Normalize `border-bottom` value. Default width is 1px if specified
+        """
+        normalized = []
+        for link in (links or []):
+            if not isinstance(link, dict):
+                normalized.append(link)
+                continue
+            item = dict(link) # shallow copy avoid mutating link
+            value = item.get('border-bottom', None)
+            style = ""
+            width = 0
+            if value is None:
+                width  = 0
+            elif isinstance(value,bool):
+                width  = 1 if value else 0
+            elif isinstance(value,str):
+                valstr = value.lower()
+                width  = 1 if any(v in valstr for v in ['yes','true','on']) else 0
+            elif isinstance(value,(int,float)):
+                width  = value
+            if width>0:
+                style += f"border-bottom: {width}px solid var(--md-default-fg-color--lightest);"
+            item['extra_style'] = style
+            normalized.append(item)
+        return normalized
+
     def _generate_links_from_yaml(self, data, parent_key=None):
         """
         Recursively generate dropdown links from YAML structure.
@@ -162,6 +190,11 @@ def on_config(self, config: MkDocsConfig, **kwargs) -> MkDocsConfig:
         # 2. Add dropdowns from mkdocs.yml
         dropdowns.extend(self.config.get('dropdowns', []))
 
+        # Normalize link-level attributes
+        for dropdown in dropdowns:
+            if isinstance(dropdown, dict) and isinstance(dropdown.get('links'), list):
+                dropdown['links'] = self._normalize_links(dropdown['links'])
+
         # Add the dropdowns to extra so templates can access them
         config.extra['header_dropdowns'] = dropdowns
 

mkdocs_header_dropdown/templates/partials/header-dropdown.html

@@ -28,7 +28,7 @@
                   {# Top-level link with submenu - clickable link with arrow #}
                   <a href="{{ link.url }}"
                      {% if link.target %}target="{{ link.target }}"{% endif %}
-                     style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; color: var(--md-default-fg-color); text-decoration: none; font-size: 0.7rem;"
+                     style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; color: var(--md-default-fg-color); text-decoration: none; font-size: 0.7rem;{{ link.extra_style }}"
                      onmouseover="this.style.backgroundColor='var(--md-default-fg-color--lightest)'"
                      onmouseout="this.style.backgroundColor='transparent'">
                     <span>{{ link.text }}</span>
@@ -38,7 +38,7 @@
                   </a>
                 {% else %}
                   {# Top-level item with submenu only - not clickable #}
-                  <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; color: var(--md-default-fg-color); font-size: 0.7rem; cursor: pointer;"
+                  <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; color: var(--md-default-fg-color); font-size: 0.7rem; cursor: pointer;{{ link.extra_style }}"
                        onmouseover="this.style.backgroundColor='var(--md-default-fg-color--lightest)'"
                        onmouseout="this.style.backgroundColor='transparent'">
                     <span>{{ link.text }}</span>
@@ -52,7 +52,7 @@
                   {% for sublink in link.submenu %}
                     <a href="{{ sublink.url }}"
                        {% if sublink.target %}target="{{ sublink.target }}"{% endif %}
-                       style="display: block; padding: 0.5rem 1rem; color: var(--md-default-fg-color); text-decoration: none; font-size: 0.7rem"
+                       style="display: block; padding: 0.5rem 1rem; color: var(--md-default-fg-color); text-decoration: none; font-size: 0.7rem;{{ sublink.extra_style }}"
                        onmouseover="this.style.backgroundColor='var(--md-default-fg-color--lightest)'"
                        onmouseout="this.style.backgroundColor='transparent'">
                       {{ sublink.text }}
@@ -63,7 +63,7 @@
             {% else %}
               <a href="{{ link.url }}"
                  {% if link.target %}target="{{ link.target }}"{% endif %}
-                 style="display: block; padding: 0.5rem 1rem; color: var(--md-default-fg-color); text-decoration: none; font-size: 0.7rem"
+                 style="display: block; padding: 0.5rem 1rem; color: var(--md-default-fg-color); text-decoration: none; font-size: 0.7rem;{{ link.extra_style }}"
                  onmouseover="this.style.backgroundColor='var(--md-default-fg-color--lightest)'"
                  onmouseout="this.style.backgroundColor='transparent'">
                 {{ link.text }}