diff --git a/assets/hb/modules/docs/scss/_nav.scss b/assets/hb/modules/docs/scss/_nav.scss
index 0a73b6a3..c5bf0fc7 100644
--- a/assets/hb/modules/docs/scss/_nav.scss
+++ b/assets/hb/modules/docs/scss/_nav.scss
@@ -20,13 +20,37 @@
     margin-top: 0.25rem;
     padding: 0.25rem 0.5rem;
     text-decoration: none;
+}
 
+.hb-docs-nav-heading {
     &:hover,
     &.active {
         background: var(--#{$prefix}primary-bg-subtle);
     }
 }
 
+.hb-docs-nav-link {
+    position: relative;
+
+    &:hover,
+    &.active {
+        @if ($hb-docs-navs-active-style == '') {
+            background: var(--#{$prefix}primary-bg-subtle);
+        }
+
+        @if ($hb-docs-navs-active-style == 'bordered') {
+            &::before {
+                content: "";
+                position: absolute;
+                left: 0;
+                margin-left: -.325rem;
+                border-left: 2px solid var(--#{$prefix}primary);
+                height: 1.25rem;
+            }
+        }
+    }
+}
+
 .hb-docs-nav-links {
     > .hb-docs-nav-links-span-all {
         .hb-docs-nav-link {
diff --git a/assets/hb/modules/docs/scss/variables.tmpl.scss b/assets/hb/modules/docs/scss/variables.tmpl.scss
index a18fd148..e8968c75 100644
--- a/assets/hb/modules/docs/scss/variables.tmpl.scss
+++ b/assets/hb/modules/docs/scss/variables.tmpl.scss
@@ -1 +1,2 @@
 $hb-docs-navs-sticky-scroll: {{ default true site.Params.hb.docs.navs_sticky_scroll }};
+$hb-docs-navs-active-style: '{{ default "" site.Params.hb.docs.navs_active_style }}';
diff --git a/hugo.toml b/hugo.toml
index b7b6ab01..f45d3207 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -16,6 +16,7 @@ cache_key = "page.Type"
 date_format = ":date_long"
 navs_reduce_font_size = false
 navs_sticky_scroll = true
+navs_active_style = "" # empty or bordered.
 
 # Takes the full width by default.
 [params.hb.full_width_types.docs]