diff --git a/packages/sidenav/src/SidenavItem.ts b/packages/sidenav/src/SidenavItem.ts
index 8225cf3f46..98ca5109d9 100644
--- a/packages/sidenav/src/SidenavItem.ts
+++ b/packages/sidenav/src/SidenavItem.ts
@@ -77,7 +77,8 @@ export class SideNavItem extends LikeAnchor(Focusable) {
if (!this.href && event) {
event.preventDefault();
}
- if (!this.disabled) {
+ // With an `href` this click will change the page contents, not toggle its children or become "selected".
+ if (!this.disabled && (!this.href || event?.defaultPrevented)) {
if (this.hasChildren) {
this.expanded = !this.expanded;
} else if (this.value) {
diff --git a/projects/documentation/content/_includes/partials/sidenav.njk b/projects/documentation/content/_includes/partials/sidenav.njk
index 6cc2d16621..b34eb197d2 100644
--- a/projects/documentation/content/_includes/partials/sidenav.njk
+++ b/projects/documentation/content/_includes/partials/sidenav.njk
@@ -29,6 +29,7 @@
href="{{ componentRoot.url }}"
value="{{ componentRoot.data.componentName }}"
{% if componentPackage === componentRoot.data.componentName %}expanded{% endif %}
+ {% if value === componentRoot.data.componentName %}autofocus{% endif %}
>
{{ componentRoot.data.displayName }}
{% for componentChild in collections[componentRoot.data.componentName + '-children'] %}
@@ -36,6 +37,7 @@
label="{{ componentChild.data.displayName }}"
href="{{ componentChild.url }}"
value="{{ componentChild.data.componentName }}"
+ {% if value === componentChild.data.componentName %}autofocus{% endif %}
>
{{ componentChild.data.displayName }}