diff --git a/packages/fiori/src/SideNavigationGroupTemplate.tsx b/packages/fiori/src/SideNavigationGroupTemplate.tsx
index c99faed43c5b..8374de6fcc47 100644
--- a/packages/fiori/src/SideNavigationGroupTemplate.tsx
+++ b/packages/fiori/src/SideNavigationGroupTemplate.tsx
@@ -22,23 +22,24 @@ function TreeItemTemplate(this: SideNavigationGroup) {
 			role="none"
 		>
 			<div class="ui5-sn-item-separator"></div>
-			<div class={`ui5-sn-item ui5-sn-item-group ${this._classes}`}
-				role="treeitem"
-				data-sap-focus-ref
-				onKeyDown={this._onkeydown}
-				onClick={this._onclick}
-				onFocusIn={this._onfocusin}
-				tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
-				aria-expanded={this._expanded}
-				title={this._tooltip}
-				aria-owns={this._groupId}
+			<div id={this._id}
+				 data-sap-focus-ref
+				 class={`ui5-sn-item ui5-sn-item-group ${this._classes}`}
+				 role="treeitem"
+				 onKeyDown={this._onkeydown}
+				 onClick={this._onclick}
+				 onFocusIn={this._onfocusin}
+				 tabIndex={this.effectiveTabIndex}
+				 aria-expanded={this._expanded}
+				 title={this._tooltip}
+				 aria-owns={this._groupId}
 			>
 				<div class="ui5-sn-item-text">{this.text}</div>
 				{!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
-						name={this.expanded ? navDownArrow : navRightArrow}
-						accessibleName={this._arrowTooltip}
-						showTooltip={true}
+						  name={this.expanded ? navDownArrow : navRightArrow}
+						  accessibleName={this._arrowTooltip}
+						  showTooltip={true}
 					/>
 				}
 			</div>
diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts
index babd880d89e6..78bc732e3b9c 100644
--- a/packages/fiori/src/SideNavigationItem.ts
+++ b/packages/fiori/src/SideNavigationItem.ts
@@ -145,11 +145,15 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 			return "tree";
 		}
 
+		if (this.accessibilityAttributes?.hasPopup) {
+			return this.accessibilityAttributes.hasPopup;
+		}
+
 		return undefined;
 	}
 
 	get _ariaChecked() {
-		if (this.isOverflow || this.unselectable) {
+		if (this.isOverflow || this.unselectable || !this.sideNavCollapsed) {
 			return undefined;
 		}
 
@@ -157,7 +161,7 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	}
 
 	get _groupId() {
-		if (!this.items.length) {
+		if (!this.items.length || this.sideNavCollapsed) {
 			return undefined;
 		}
 
@@ -165,7 +169,7 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	}
 
 	get _expanded() {
-		if (!this.items.length) {
+		if (!this.items.length || this.sideNavCollapsed) {
 			return undefined;
 		}
 
@@ -313,15 +317,15 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 		this.getDomRef()!.classList.add("ui5-sn-item-no-hover-effect");
 	}
 
-	get isSideNavigationItem() {
-		return true;
-	}
-
 	_toggle() {
 		if (this.items.length && !this.effectiveDisabled) {
 			this.expanded = !this.expanded;
 		}
 	}
+
+	get isSideNavigationItem() {
+		return true;
+	}
 }
 
 SideNavigationItem.define();
diff --git a/packages/fiori/src/SideNavigationItemBase.ts b/packages/fiori/src/SideNavigationItemBase.ts
index 2457513f1925..c0c925e2c533 100644
--- a/packages/fiori/src/SideNavigationItemBase.ts
+++ b/packages/fiori/src/SideNavigationItemBase.ts
@@ -115,7 +115,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
 	}
 
 	get effectiveTabIndex() {
-		return this.forcedTabIndex || undefined;
+		return this.forcedTabIndex !== undefined ? parseInt(this.forcedTabIndex) : undefined;
 	}
 
 	get sideNavigation() {
diff --git a/packages/fiori/src/SideNavigationItemTemplate.tsx b/packages/fiori/src/SideNavigationItemTemplate.tsx
index e58b84787ae6..1403a76db6c7 100644
--- a/packages/fiori/src/SideNavigationItemTemplate.tsx
+++ b/packages/fiori/src/SideNavigationItemTemplate.tsx
@@ -6,154 +6,72 @@ import type SideNavigationItem from "./SideNavigationItem.js";
 
 export default function SideNavigationItemTemplate(this: SideNavigationItem) {
 	if (this.sideNavCollapsed) {
-		return MenuItemTemplate.call(this);
+		return ItemTemplate.call(this);
 	}
-	return TreeItemTemplate.call(this);
+
+	return (
+		<li id={this._id} class="ui5-sn-list-li" role="none">
+			{ItemTemplate.call(this)}
+		</li>
+	);
 }
 
-function MenuItemTemplate(this: SideNavigationItem) {
-	return (<>
-		{this._href ?
-			<a id={this._id}
-				class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
-				role={this.ariaRole}
-				data-sap-focus-ref
-				onKeyDown={this._onkeydown}
-				onKeyUp={this._onkeyup}
-				onClick={this._onclick}
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
-				onMouseEnter={this._onmouseenter}
-				onMouseLeave={this._onmouseleave}
-				tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
-				aria-haspopup={this._ariaHasPopup}
-				aria-checked={this._ariaChecked}
-				title={this._tooltip}
-				href={this._href}
-				target={this._target}
+function ItemTemplate(this: SideNavigationItem) {
+	const EffectiveTag = this._effectiveTag;
+
+	return (
+		<>
+			<EffectiveTag id={this._id}
+						  data-sap-focus-ref
+						  class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
+						  role={this.ariaRole}
+						  onKeyDown={this._onkeydown}
+						  onKeyUp={this._onkeyup}
+						  onClick={this._onclick}
+						  onFocusIn={this._onfocusin}
+						  tabIndex={this.effectiveTabIndex}
+						  aria-current={this._ariaCurrent}
+						  aria-selected={this._ariaSelected}
+						  title={this._tooltip}
+						  aria-disabled={this.effectiveDisabled}
+						  href={this._href}
+						  target={this._target}
+						  aria-haspopup={this._ariaHasPopup}
+						  onFocusOut={this._onfocusout}
+						  onMouseEnter={this._onmouseenter}
+						  onMouseLeave={this._onmouseleave}
+						  aria-checked={this._ariaChecked}
+						  aria-owns={this._groupId}
+						  aria-label={this._ariaLabel}
+						  aria-expanded={this._expanded}
 			>
-				<Icon class="ui5-sn-item-icon" name={this.icon}/>
+				{this.sideNavCollapsed ?
+					<Icon class="ui5-sn-item-icon" name={this.icon}/>
+					:
+					this.icon && <Icon class="ui5-sn-item-icon" name={this.icon}/>
+				}
 				<div class="ui5-sn-item-text">{this.text}</div>
-				{!!this.items.length &&
+				{this.sideNavCollapsed ?
+					!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
-						name={navRightArrow}
+						  name={navRightArrow}
 					/>
-				}
-				{this.isExternalLink &&
-					<Icon class="ui5-sn-item-external-link-icon"
-						name={arrowRight}
-					/>
-				}
-			</a>
-			:
-			<div id={this._id}
-				class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
-				role={this.ariaRole}
-				data-sap-focus-ref
-				onKeyDown={this._onkeydown}
-				onKeyUp={this._onkeyup}
-				onClick={this._onclick}
-				onFocusIn={this._onfocusin}
-				onFocusOut={this._onfocusout}
-				onMouseEnter={this._onmouseenter}
-				onMouseLeave={this._onmouseleave}
-				tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
-				aria-haspopup={this._ariaHasPopup}
-				aria-checked={this._ariaChecked}
-				title={this._tooltip}
-				aria-label={this._ariaLabel}
-			>
-				<Icon class="ui5-sn-item-icon" name={this.icon}/>
-				<div class="ui5-sn-item-text">{this.text}</div>
-				{!!this.items.length &&
+					:
+					!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
-						name={navRightArrow}
+						  name={this.expanded ? navDownArrow : navRightArrow}
+						  accessibleName={this._arrowTooltip}
+						  showTooltip={true}
+						  onClick={this._onToggleClick}
 					/>
 				}
 				{this.isExternalLink &&
 					<Icon class="ui5-sn-item-external-link-icon"
-						name={arrowRight}
+						  name={arrowRight}
 					/>
 				}
-			</div>
-		}
-	</>);
-}
-
-function TreeItemTemplate(this: SideNavigationItem) {
-	return (
-		<li id={this._id} class="ui5-sn-list-li" role="none">
-			{this._href ?
-				<a class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
-					role={this.ariaRole}
-					data-sap-focus-ref
-					onKeyDown={this._onkeydown}
-					onKeyUp={this._onkeyup}
-					onClick={this._onclick}
-					onFocusIn={this._onfocusin}
-					tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
-					aria-expanded={this._expanded}
-					aria-current={this._ariaCurrent}
-					aria-selected={this.selected}
-					title={this._tooltip}
-					aria-owns={this._groupId}
-					href={this._href}
-					target={this._target}
-				>
-					{this.icon &&
-					<Icon class="ui5-sn-item-icon" name={this.icon}/>
-					}
-					<div class="ui5-sn-item-text">{this.text}</div>
-					{this.isExternalLink &&
-					<Icon class="ui5-sn-item-external-link-icon"
-						name={arrowRight}
-					/>
-					}
-					{!!this.items.length &&
-					<Icon class="ui5-sn-item-toggle-icon"
-						name={this.expanded ? navDownArrow : navRightArrow}
-						accessibleName={this._arrowTooltip}
-						showTooltip={true}
-						onClick={this._onToggleClick}
-					/>
-					}
-				</a>
-				:
-				<div class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
-					role={this.ariaRole}
-					data-sap-focus-ref
-					onKeyDown={this._onkeydown}
-					onKeyUp={this._onkeyup}
-					onClick={this._onclick}
-					onFocusIn={this._onfocusin}
-					tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
-					aria-expanded={this._expanded}
-					aria-current={this._ariaCurrent}
-					aria-selected={this.selected}
-					aria-haspopup={this.accessibilityAttributes?.hasPopup}
-					title={this._tooltip}
-					aria-owns={this._groupId}
-				>
-					{this.icon &&
-					<Icon class="ui5-sn-item-icon" name={this.icon}/>
-					}
-					<div class="ui5-sn-item-text">{this.text}</div>
-					{this.isExternalLink &&
-					<Icon class="ui5-sn-item-external-link-icon"
-						name={arrowRight}
-					/>
-					}
-					{!!this.items.length &&
-					<Icon class="ui5-sn-item-toggle-icon"
-						name={this.expanded ? navDownArrow : navRightArrow}
-						accessibleName={this._arrowTooltip}
-						showTooltip={true}
-						onClick={this._onToggleClick}
-					/>
-					}
-				</div>
-			}
-			{!!this.items.length &&
+			</EffectiveTag>
+			{!this.sideNavCollapsed && !!this.items.length &&
 				<ul id={this._groupId}
 					class="ui5-sn-item-ul"
 					aria-label={this.text}
@@ -162,6 +80,6 @@ function TreeItemTemplate(this: SideNavigationItem) {
 					<slot></slot>
 				</ul>
 			}
-		</li>
+		</>
 	);
 }
diff --git a/packages/fiori/src/SideNavigationPopoverTemplate.tsx b/packages/fiori/src/SideNavigationPopoverTemplate.tsx
index 7b0a39a983c2..3517f9525cf6 100644
--- a/packages/fiori/src/SideNavigationPopoverTemplate.tsx
+++ b/packages/fiori/src/SideNavigationPopoverTemplate.tsx
@@ -6,6 +6,23 @@ import SideNavigationItem from "./SideNavigationItem.js";
 import SideNavigationSubItem from "./SideNavigationSubItem.js";
 
 export default function SideNavigationTemplate(this: SideNavigation) {
+	const renderMenuItem = (item: SideNavigationItem | SideNavigationSubItem) => (
+		<NavigationMenuItem
+			accessibilityAttributes={item.accessibilityAttributes}
+			text={item.text}
+			icon={item.icon}
+			design={item.design}
+			disabled={item.disabled}
+			href={item.href}
+			target={item.target}
+			title={item.title}
+			tooltip={item._tooltip}
+			ref={this.captureRef.bind(item)}
+		>
+			{(item as any).items?.map(renderMenuItem)}
+		</NavigationMenuItem>
+	);
+
 	return (<>
 		<NavigationMenu
 			id={`${this._id}-side-navigation-overflow-menu`}
@@ -14,35 +31,7 @@ export default function SideNavigationTemplate(this: SideNavigation) {
 			onClose={this._onMenuClose}
 			class="ui5-side-navigation-popover ui5-side-navigation-overflow-menu"
 		>
-			{this._menuPopoverItems.map(item =>
-				<NavigationMenuItem
-					accessibilityAttributes={item.accessibilityAttributes}
-					text={item.text}
-					icon={item.icon}
-					design={item.design}
-					disabled={item.disabled}
-					href={item.href}
-					target={item.target}
-					title={item.title}
-					tooltip={item._tooltip}
-					ref={this.captureRef.bind(item)}
-				>
-					{item.items.map(subItem =>
-						<NavigationMenuItem
-							accessibilityAttributes={subItem.accessibilityAttributes}
-							text={subItem.text}
-							icon={subItem.icon}
-							design={subItem.design}
-							disabled={subItem.disabled}
-							ref={this.captureRef.bind(subItem)}
-							href={subItem.href}
-							target={subItem.target}
-							title={subItem.title}
-							tooltip={subItem._tooltip}
-						/>
-					)}
-				</NavigationMenuItem>
-			)}
+			{this._menuPopoverItems.map(renderMenuItem)}
 		</NavigationMenu>
 		<ResponsivePopover
 			verticalAlign="Top"
diff --git a/packages/fiori/src/SideNavigationSelectableItemBase.ts b/packages/fiori/src/SideNavigationSelectableItemBase.ts
index 37bda8d689ab..8121113047f6 100644
--- a/packages/fiori/src/SideNavigationSelectableItemBase.ts
+++ b/packages/fiori/src/SideNavigationSelectableItemBase.ts
@@ -44,6 +44,15 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 		"click": SideNavigationItemClickEventDetail
 	}
 
+	/**
+	 * Defines if the item's parent is disabled.
+	 * @private
+	 * @default false
+	 * @since 2.10.0
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_parentDisabled: boolean = false;
+
 	/**
 	 * Defines the icon of the item.
 	 *
@@ -178,7 +187,7 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 	}
 
 	get _target() {
-		return (!this.effectiveDisabled && this.target) ? this.target : undefined;
+		return (!this.effectiveDisabled && this.href && this.target) ? this.target : undefined;
 	}
 
 	get isExternalLink() {
@@ -189,6 +198,22 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 		return this.selected;
 	}
 
+	get _effectiveTag() {
+		return this._href ? "a" : "div";
+	}
+
+	get effectiveDisabled() {
+		return this.disabled || this._parentDisabled;
+	}
+
+	get _ariaHasPopup() {
+		if (this.accessibilityAttributes?.hasPopup) {
+			return this.accessibilityAttributes.hasPopup;
+		}
+
+		return undefined;
+	}
+
 	get classesArray() {
 		const classes = [];
 
@@ -208,13 +233,21 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 	}
 
 	get _ariaCurrent() {
-		if (!this.selected) {
+		if (!this.sideNavCollapsed && !this.selected) {
 			return undefined;
 		}
 
 		return "page";
 	}
 
+	get _ariaSelected() {
+		if (!this.sideNavCollapsed) {
+			return undefined;
+		}
+
+		return this.selected;
+	}
+
 	_onkeydown(e: KeyboardEvent) {
 		const isRTL = this.effectiveDir === "rtl";
 
diff --git a/packages/fiori/src/SideNavigationSubItem.ts b/packages/fiori/src/SideNavigationSubItem.ts
index 8226605beed0..6fabffe14dbf 100644
--- a/packages/fiori/src/SideNavigationSubItem.ts
+++ b/packages/fiori/src/SideNavigationSubItem.ts
@@ -2,7 +2,6 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
 import SideNavigationSubItemTemplate from "./SideNavigationSubItemTemplate.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 
 // Styles
 import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
@@ -31,15 +30,6 @@ import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.c
 	styles: SideNavigationSubItemCss,
 })
 class SideNavigationSubItem extends SideNavigationSelectableItemBase {
-	/**
-	 * Defines if the item's parent is disabled.
-	 * @private
-	 * @default false
-	 * @since 2.10.0
-	 */
-	@property({ type: Boolean, noAttribute: true })
-	_parentDisabled: boolean = false;
-
 	_onkeydown(e: KeyboardEvent) {
 		super._onkeydown(e);
 	}
@@ -56,10 +46,6 @@ class SideNavigationSubItem extends SideNavigationSelectableItemBase {
 		super._onclick(e);
 	}
 
-	get effectiveDisabled() {
-		return this.disabled || this._parentDisabled;
-	}
-
 	get classesArray() {
 		const classes = super.classesArray;
 
diff --git a/packages/fiori/src/SideNavigationSubItemTemplate.tsx b/packages/fiori/src/SideNavigationSubItemTemplate.tsx
index ce0a4b245413..0d7727ef5a34 100644
--- a/packages/fiori/src/SideNavigationSubItemTemplate.tsx
+++ b/packages/fiori/src/SideNavigationSubItemTemplate.tsx
@@ -3,59 +3,37 @@ import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
 
 export default function SideNavigationSubItemTemplate(this: SideNavigationSubItem) {
+	const EffectiveTag = this._effectiveTag;
+
 	return (
 		<li id={this._id} class="ui5-sn-list-li" role="none">
-			{this._href ?
-				<a class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}
-					role="treeitem"
-					data-sap-focus-ref
-					onKeyDown={this._onkeydown}
-					onKeyUp={this._onkeyup}
-					onClick={this._onclick}
-					onFocusIn={this._onfocusin}
-					tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
-					aria-current={this._ariaCurrent}
-					aria-selected={this.selected}
-					title={this._tooltip}
-					aria-disabled={this.effectiveDisabled}
-					href={this._href}
-					target={this._target}
-				>
-					{this.icon &&
-						<Icon class="ui5-sn-item-icon" name={this.icon}/>
-					}
-					<div class="ui5-sn-item-text">{this.text}</div>
-					{this.isExternalLink &&
-						<Icon class="ui5-sn-item-external-link-icon"
-							name={arrowRight}
-						/>
-					}
-				</a>
-				:
-				<div class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}
-					role="treeitem"
-					data-sap-focus-ref
-					onKeyDown={this._onkeydown}
-					onKeyUp={this._onkeyup}
-					onClick={this._onclick}
-					onFocusIn={this._onfocusin}
-					tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
-					aria-current={this._ariaCurrent}
-					aria-haspopup={this.accessibilityAttributes?.hasPopup}
-					aria-selected={this.selected}
-					title={this._tooltip}
-				>
-					{this.icon &&
-						<Icon class="ui5-sn-item-icon" name={this.icon}/>
-					}
-					<div class="ui5-sn-item-text">{this.text}</div>
-					{this.isExternalLink &&
-						<Icon class="ui5-sn-item-external-link-icon"
-							name={arrowRight}
-						/>
-					}
-				</div>
-			}
+			<EffectiveTag id={this._id}
+						  data-sap-focus-ref
+						  class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}
+						  role={this.ariaRole}
+						  onKeyDown={this._onkeydown}
+						  onKeyUp={this._onkeyup}
+						  onClick={this._onclick}
+						  onFocusIn={this._onfocusin}
+						  tabIndex={this.effectiveTabIndex}
+						  aria-current={this._ariaCurrent}
+						  aria-selected={this._ariaSelected}
+						  title={this._tooltip}
+						  aria-disabled={this.effectiveDisabled}
+						  href={this._href}
+						  target={this._target}
+						  aria-haspopup={this._ariaHasPopup}
+			>
+				{this.icon &&
+					<Icon class="ui5-sn-item-icon" name={this.icon}/>
+				}
+				<div class="ui5-sn-item-text">{this.text}</div>
+				{this.isExternalLink &&
+					<Icon class="ui5-sn-item-external-link-icon"
+						  name={arrowRight}
+					/>
+				}
+			</EffectiveTag>
 		</li>
 	);
 }