diff --git a/apps/docs/app/site.css b/apps/docs/app/site.css
index 016e3aa..7940339 100644
--- a/apps/docs/app/site.css
+++ b/apps/docs/app/site.css
@@ -2466,10 +2466,6 @@
   background: var(--vk-surface-muted);
 }
 
-.vekui-components-nav-item[data-state="active"] {
-  box-shadow: inset 2px 0 0 var(--vk-accent);
-}
-
 .vekui-components-content {
   max-width: 860px;
 }
@@ -2747,6 +2743,19 @@
   border-radius: 0;
   min-height: 31px;
   padding: 5px 0;
+  position: relative;
+}
+
+.vekui-components-nav-item::before {
+  background: var(--vk-ink);
+  bottom: 5px;
+  content: "";
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 5px;
+  width: 2px;
 }
 
 .vekui-components-nav-item:hover,
@@ -2761,11 +2770,14 @@
 }
 
 .vekui-components-nav-item[data-state="active"] {
-  box-shadow: inset 2px 0 0 var(--vk-ink);
   font-weight: 600;
   padding-left: 10px;
 }
 
+.vekui-components-nav-item[data-state="active"]::before {
+  opacity: 1;
+}
+
 .vekui-components-toolbar {
   margin-bottom: 22px;
   padding-bottom: 18px;
@@ -3292,7 +3304,6 @@ header .nextra-hamburger {
 }
 
 .vekui-components-nav-item[data-state="active"] {
-  border-left: 2px solid var(--vk-ink);
   box-shadow: none;
   padding-left: 8px;
 }
diff --git a/apps/docs/scripts/check-code-blocks.mjs b/apps/docs/scripts/check-code-blocks.mjs
index b9f3515..d4666e0 100644
--- a/apps/docs/scripts/check-code-blocks.mjs
+++ b/apps/docs/scripts/check-code-blocks.mjs
@@ -27,6 +27,17 @@ function assertRuleIncludes(source, selector, expected, message) {
   }
 }
 
+function assertRuleExcludes(source, selector, forbidden, message) {
+  const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+  const blocks = [...source.matchAll(new RegExp(`${escapedSelector}\\s*\\{([\\s\\S]*?)\\n\\}`, "g"))].map(
+    (match) => match[1]
+  )
+
+  if (blocks.some((block) => block.includes(forbidden))) {
+    throw new Error(message)
+  }
+}
+
 assertIncludes(
   componentPage,
   "tokenizeTsxLine",
@@ -181,5 +192,35 @@ assertRuleIncludes(
   "opacity: 1;",
   "Active status tabs should reveal the independent indicator."
 )
+assertRuleIncludes(
+  siteCss,
+  ".vekui-components-nav-item",
+  "position: relative;",
+  "Components nav items should anchor an independent active indicator."
+)
+assertRuleIncludes(
+  siteCss,
+  ".vekui-components-nav-item::before",
+  "background: var(--vk-ink);",
+  "Components nav active indicators should render as a straight pseudo-element instead of a curved item border."
+)
+assertRuleIncludes(
+  siteCss,
+  '.vekui-components-nav-item[data-state="active"]::before',
+  "opacity: 1;",
+  "Active components nav items should reveal the independent indicator."
+)
+assertRuleExcludes(
+  siteCss,
+  '.vekui-components-nav-item[data-state="active"]',
+  "border-left:",
+  "Active components nav items should not draw the indicator with a curved border-left."
+)
+assertRuleExcludes(
+  siteCss,
+  '.vekui-components-nav-item[data-state="active"]',
+  "box-shadow: inset",
+  "Active components nav items should not draw the indicator with a curved inset shadow."
+)
 
 console.log("Code block rendering checks passed.")