diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index e5840da78e..de746a0700 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -209,99 +209,104 @@ Just set the `pinned` prop.
 			'app-navigation-entry--collapsible': collapsible,
 		}"
 		class="app-navigation-entry-wrapper">
-		<nav-element v-bind="navElement"
-			:class="{
-				'app-navigation-entry--no-icon': !isIconShown,
-				'app-navigation-entry--editing': editingActive,
-				'app-navigation-entry--deleted': undo,
-				'active': isActive,
-			}"
-			class="app-navigation-entry">
-			<!-- Icon and name -->
-			<a v-if="!undo"
-				class="app-navigation-entry-link"
-				:aria-description="ariaDescription"
-				:aria-expanded="opened.toString()"
-				:href="href || '#'"
-				:target="isExternal(href) ? '_blank' : ''"
-				:title="title || nameTitleFallback"
-				@blur="handleBlur"
-				@click="onClick"
-				@focus="handleFocus"
-				@keydown.tab.exact="handleTab">
-
-				<!-- icon if not collapsible -->
-				<!-- never show the icon over the collapsible if mobile -->
-				<div :class="{ [icon]: icon && isIconShown }"
-					class="app-navigation-entry-icon">
-					<NcLoadingIcon v-if="loading" />
-					<slot v-else-if="isIconShown" name="icon" />
+		<component :is="isRouterLink ? 'router-link' : 'NcVNodes'"
+			v-slot="{ navigate, isActive }"
+			:custom="isRouterLink ? true : false"
+			:to="to"
+			:exact="isRouterLink ? exact : null">
+			<div :class="{
+					'app-navigation-entry--no-icon': !isIconShown,
+					'app-navigation-entry--editing': editingActive,
+					'app-navigation-entry--deleted': undo,
+					'active': isActive && to,
+				}"
+				class="app-navigation-entry">
+				<!-- Icon and name -->
+				<a v-if="!undo"
+					class="app-navigation-entry-link"
+					:aria-description="ariaDescription"
+					:aria-expanded="opened.toString()"
+					:href="href || '#'"
+					:target="isExternal(href) ? '_blank' : ''"
+					:title="title || nameTitleFallback"
+					@blur="handleBlur"
+					@click="(event) => onClick(event, navigate)"
+					@focus="handleFocus"
+					@keydown.tab.exact="handleTab">
+
+					<!-- icon if not collapsible -->
+					<!-- never show the icon over the collapsible if mobile -->
+					<div :class="{ [icon]: icon && isIconShown }"
+						class="app-navigation-entry-icon">
+						<NcLoadingIcon v-if="loading" />
+						<slot v-else-if="isIconShown" name="icon" />
+					</div>
+					<span v-if="!editingActive" class="app-navigation-entry__title">
+						{{ nameTitleFallback }}
+					</span>
+					<div v-if="editingActive" class="editingContainer">
+						<NcInputConfirmCancel ref="editingInput"
+							v-model="editingValue"
+							:placeholder="editPlaceholder !== '' ? editPlaceholder : nameTitleFallback"
+							@cancel="cancelEditing"
+							@confirm="handleEditingDone" />
+					</div>
+				</a>
+
+				<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
+				<!-- undo entry -->
+				<div v-if="undo" class="app-navigation-entry__deleted">
+					<div class="app-navigation-entry__deleted-description">
+						{{ nameTitleFallback }}
+					</div>
 				</div>
-				<span v-if="!editingActive" class="app-navigation-entry__title">
-					{{ nameTitleFallback }}
-				</span>
-				<div v-if="editingActive" class="editingContainer">
-					<NcInputConfirmCancel ref="editingInput"
-						v-model="editingValue"
-						:placeholder="editPlaceholder !== '' ? editPlaceholder : nameTitleFallback"
-						@cancel="cancelEditing"
-						@confirm="handleEditingDone" />
-				</div>
-			</a>
-
-			<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
-			<!-- undo entry -->
-			<div v-if="undo" class="app-navigation-entry__deleted">
-				<div class="app-navigation-entry__deleted-description">
-					{{ nameTitleFallback }}
-				</div>
-			</div>
 
-			<!-- Counter and Actions -->
-			<div v-if="hasUtils && !editingActive"
-				class="app-navigation-entry__utils"
-				:class="{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }">
-				<div v-if="$slots.counter"
-					class="app-navigation-entry__counter-wrapper">
-					<slot name="counter" />
-				</div>
-				<NcActions v-if="$slots.actions || (editable && !editingActive) || undo"
-					ref="actions"
-					:inline="inlineActions"
-					class="app-navigation-entry__actions"
-					container="#app-navigation-vue"
-					:boundaries-element="actionsBoundariesElement"
-					:placement="menuPlacement"
-					:open="menuOpen"
-					:force-menu="forceMenu"
-					:default-icon="menuIcon"
-					@update:open="onMenuToggle">
-					<template #icon>
-						<!-- @slot Slot for the custom menu icon -->
-						<slot name="menu-icon" />
-					</template>
-					<NcActionButton v-if="editable && !editingActive"
-						:aria-label="editButtonAriaLabel"
-						@click="handleEdit">
+				<!-- Counter and Actions -->
+				<div v-if="hasUtils && !editingActive"
+					class="app-navigation-entry__utils"
+					:class="{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }">
+					<div v-if="$slots.counter"
+						class="app-navigation-entry__counter-wrapper">
+						<slot name="counter" />
+					</div>
+					<NcActions v-if="$slots.actions || (editable && !editingActive) || undo"
+						ref="actions"
+						:inline="inlineActions"
+						class="app-navigation-entry__actions"
+						container="#app-navigation-vue"
+						:boundaries-element="actionsBoundariesElement"
+						:placement="menuPlacement"
+						:open="menuOpen"
+						:force-menu="forceMenu"
+						:default-icon="menuIcon"
+						@update:open="onMenuToggle">
 						<template #icon>
-							<Pencil :size="20" />
+							<!-- @slot Slot for the custom menu icon -->
+							<slot name="menu-icon" />
 						</template>
-						{{ editLabel }}
-					</NcActionButton>
-					<NcActionButton v-if="undo"
-						:aria-label="undoButtonAriaLabel"
-						@click="handleUndo">
-						<template #icon>
-							<Undo :size="20" />
-						</template>
-					</NcActionButton>
-					<slot name="actions" />
-				</NcActions>
-			</div>
+						<NcActionButton v-if="editable && !editingActive"
+							:aria-label="editButtonAriaLabel"
+							@click="handleEdit">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							{{ editLabel }}
+						</NcActionButton>
+						<NcActionButton v-if="undo"
+							:aria-label="undoButtonAriaLabel"
+							@click="handleUndo">
+							<template #icon>
+								<Undo :size="20" />
+							</template>
+						</NcActionButton>
+						<slot name="actions" />
+					</NcActions>
+				</div>
 
-			<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
-			<slot name="extra" />
-		</nav-element>
+				<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
+				<slot name="extra" />
+			</div>
+		</component>
 		<!-- Children elements -->
 		<ul v-if="canHaveChildren && hasChildren" class="app-navigation-entry__children">
 			<slot />
@@ -315,6 +320,7 @@ import { directive as ClickOutside } from 'v-click-outside'
 import NcActions from '../NcActions/index.js'
 import NcActionButton from '../NcActionButton/index.js'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
+import NcVNodes from '../NcVNodes/index.js'
 import NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'
 import isMobile from '../../mixins/isMobile/index.js'
 import NcInputConfirmCancel from './NcInputConfirmCancel.vue'
@@ -330,9 +336,10 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
-		NcLoadingIcon,
 		NcAppNavigationIconCollapsible,
 		NcInputConfirmCancel,
+		NcLoadingIcon,
+		NcVNodes,
 		Pencil,
 		Undo,
 	},
@@ -399,7 +406,7 @@ export default {
 		 */
 		to: {
 			type: [String, Object],
-			default: '',
+			default: null,
 		},
 
 		/**
@@ -570,6 +577,10 @@ export default {
 			return this.name
 		},
 
+		isRouterLink() {
+			return this.to && !this.href
+		},
+
 		collapsible() {
 			return this.allowCollapse && !!this.$slots.default
 		},
@@ -598,25 +609,6 @@ export default {
 			return false
 		},
 
-		// This is used to decide which outer element type to use
-		navElement() {
-			if (this.to && !this.href) {
-				return {
-					is: 'router-link',
-					tag: 'div',
-					to: this.to,
-					exact: this.exact,
-				}
-			}
-			return {
-				is: 'div',
-			}
-		},
-
-		isActive() {
-			return this.to && this.$route === this.to
-		},
-
 		editButtonAriaLabel() {
 			return this.editLabel ? this.editLabel : t('Edit item')
 		},
@@ -656,7 +648,9 @@ export default {
 		},
 
 		// forward click event
-		onClick(event) {
+		onClick(event, navigate) {
+			// Navigate is only defined if it is a router-link
+			navigate?.()
 			this.$emit('click', event)
 		},
 
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index 9e6a417faf..0c83aedae5 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -289,20 +289,6 @@ export default {
 		},
 	},
 
-	computed: {
-		// Determines whether the root element is an a,
-		// a router-link or a button
-		rootElement() {
-			if (this.to) {
-				return 'router-link'
-			}
-			if (this.href) {
-				return 'a'
-			}
-			return 'button'
-		},
-	},
-
 	/**
 	 * The render function to display the component
 	 *
@@ -326,7 +312,7 @@ export default {
 			this)
 		}
 
-		return h(this.rootElement,
+		const renderButton = ({ navigate, isActive, isExactActive } = {}) => h((this.to || !this.href) ? 'button' : 'a',
 			{
 				class: [
 					'button-vue',
@@ -336,6 +322,8 @@ export default {
 						'button-vue--icon-and-text': hasIcon && hasText,
 						[`button-vue--vue-${this.type}`]: this.type,
 						'button-vue--wide': this.wide,
+						active: isActive,
+						'router-link-exact-active': isExactActive,
 					},
 				],
 				attrs: {
@@ -346,20 +334,14 @@ export default {
 					href: (!this.to && this.href) ? this.href : null,
 					...this.$attrs,
 				},
-				props: {
-					to: this.to ? this.to : null,
-					tag: this.to ? 'button' : null,
-					exact: this.exact,
-				},
 				on: {
 					...this.$listeners,
-				},
-				// nativeOn is only valid on components
-				...(this.rootElement === 'router-link' && {
-					nativeOn: {
-						...this.$listeners,
+					click: ($event) => {
+						// We have to both navigate and call the listeners click handler
+						this.$listeners?.click?.($event)
+						navigate?.($event)
 					},
-				}),
+				},
 			},
 			[
 				h('span', { class: 'button-vue__wrapper' }, [
@@ -368,6 +350,22 @@ export default {
 				]),
 			]
 		)
+
+		// If we have a router-link, we wrap the button in it
+		if (this.to) {
+			return h('router-link', {
+				props: {
+					custom: true,
+					to: this.to,
+					exact: this.exact,
+				},
+				scopedSlots: {
+					default: renderButton,
+				},
+			})
+		}
+		// Otherwise we simply return the button
+		return renderButton()
 	},
 }
 
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 8f3a51e4e6..5fe0910eb8 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -199,71 +199,88 @@
 
 <template>
 	<!-- This wrapper can be either a router link or a `<li>` -->
-	<nav-element class="list-item__wrapper"
-		:class="{ 'list-item__wrapper--active' : active }"
-		v-bind="navElement">
-		<a :id="anchorId"
-			ref="list-item"
-			:href="href"
-			:target="href === '#' ? undefined : '_blank'"
-			:rel="href === '#' ? undefined : 'noopener noreferrer'"
-			class="list-item"
-			:aria-label="linkAriaLabel"
-			@mouseover="handleMouseover"
-			@mouseleave="handleMouseleave"
-			@focus="handleFocus"
-			@blur="handleBlur"
-			@keydown.tab.exact="handleTab"
-			@click="onClick"
-			@keydown.esc="hideActions">
-
-			<div class="list-item-content__wrapper"
-				:class="{ 'list-item-content__wrapper--compact': compact }">
-				<!-- @slot This slot is used for the NcAvatar or icon -->
-				<slot name="icon" />
-
-				<!-- Main content -->
-				<div class="list-item-content">
-					<div class="list-item-content__main"
-						:class="{ 'list-item-content__main--oneline': oneLine }">
-
-						<!-- First line, title and details -->
-						<div class="line-one">
-							<span class="line-one__title">
-								{{ title }}
-							</span>
-							<span v-if="showDetails"
-								class="line-one__details">
-								{{ details }}
-							</span>
-						</div>
+	<component :is="to ? 'router-link' : 'NcVNodes'"
+		v-slot="{ navigate, isActive }"
+		:custom="to ? true : null"
+		:to="to"
+		:exact="to ? exact : null"
+		@click="to ? navigate : null">
+		<li class="list-item__wrapper"
+			:class="{ 'list-item__wrapper--active' : isActive }">
+			<a :id="anchorId"
+				ref="list-item"
+				:href="href"
+				:target="href === '#' ? undefined : '_blank'"
+				:rel="href === '#' ? undefined : 'noopener noreferrer'"
+				class="list-item"
+				:aria-label="linkAriaLabel"
+				@mouseover="handleMouseover"
+				@mouseleave="handleMouseleave"
+				@focus="handleFocus"
+				@blur="handleBlur"
+				@keydown.tab.exact="handleTab"
+				@click="onClick"
+				@keydown.esc="hideActions">
+
+				<div class="list-item-content__wrapper"
+					:class="{ 'list-item-content__wrapper--compact': compact }">
+					<!-- @slot This slot is used for the NcAvatar or icon -->
+					<slot name="icon" />
+
+					<!-- Main content -->
+					<div class="list-item-content">
+						<div class="list-item-content__main"
+							:class="{ 'list-item-content__main--oneline': oneLine }">
+
+							<!-- First line, title and details -->
+							<div class="line-one">
+								<span class="line-one__title">
+									{{ title }}
+								</span>
+								<span v-if="showDetails"
+									class="line-one__details">
+									{{ details }}
+								</span>
+							</div>
+
+							<!-- Second line, subtitle and counter -->
+							<div class="line-two"
+								:class="{'line-one--bold': bold}">
+								<span v-if="hasSubtitle" class="line-two__subtitle">
+									<!-- @slot Slot for the second line of the component -->
+									<slot name="subtitle" />
+								</span>
 
-						<!-- Second line, subtitle and counter -->
-						<div class="line-two"
-							:class="{'line-one--bold': bold}">
-							<span v-if="hasSubtitle" class="line-two__subtitle">
-								<!-- @slot Slot for the second line of the component -->
-								<slot name="subtitle" />
-							</span>
-
-							<!-- Counter and indicator -->
-							<span v-if="showAdditionalElements" class="line-two__additional_elements">
-								<NcCounterBubble v-if="counterNumber != 0"
-									class="line-two__counter"
-									:type="counterType">
-									{{ counterNumber }}
-								</NcCounterBubble>
-
-								<span v-if="hasIndicator" class="line-two__indicator">
-									<!-- @slot This slot is used for some indicator in form of icon -->
-									<slot name="indicator" />
+								<!-- Counter and indicator -->
+								<span v-if="showAdditionalElements" class="line-two__additional_elements">
+									<NcCounterBubble v-if="counterNumber != 0"
+										class="line-two__counter"
+										:type="counterType">
+										{{ counterNumber }}
+									</NcCounterBubble>
+
+									<span v-if="hasIndicator" class="line-two__indicator">
+										<!-- @slot This slot is used for some indicator in form of icon -->
+										<slot name="indicator" />
+									</span>
 								</span>
-							</span>
+							</div>
 						</div>
-					</div>
 
+						<!-- Actions -->
+						<div v-show="displayActionsOnHoverFocus && !forceDisplayActions"
+							class="list-item-content__actions"
+							@click.prevent.stop="">
+							<NcActions ref="actions"
+								:aria-label="computedActionsAriaLabel"
+								@update:open="handleActionsUpdateOpen">
+								<!-- @slot Provide the actions for the right side quick menu -->
+								<slot name="actions" />
+							</NcActions>
+						</div>
+					</div>
 					<!-- Actions -->
-					<div v-show="displayActionsOnHoverFocus && !forceDisplayActions"
+					<div v-show="forceDisplayActions"
 						class="list-item-content__actions"
 						@click.prevent.stop="">
 						<NcActions ref="actions"
@@ -274,25 +291,14 @@
 						</NcActions>
 					</div>
 				</div>
-				<!-- Actions -->
-				<div v-show="forceDisplayActions"
-					class="list-item-content__actions"
-					@click.prevent.stop="">
-					<NcActions ref="actions"
-						:aria-label="computedActionsAriaLabel"
-						@update:open="handleActionsUpdateOpen">
-						<!-- @slot Provide the actions for the right side quick menu -->
-						<slot name="actions" />
-					</NcActions>
+
+				<!-- @slot Extra elements below the item -->
+				<div v-if="$slots.extra" class="list-item__extra">
+					<slot name="extra" />
 				</div>
-			</div>
-
-			<!-- @slot Extra elements below the item -->
-			<div v-if="$slots.extra" class="list-item__extra">
-				<slot name="extra" />
-			</div>
-		</a>
-	</nav-element>
+			</a>
+		</li>
+	</component>
 </template>
 
 <script>
@@ -339,7 +345,7 @@ export default {
 		 */
 		to: {
 			type: [String, Object],
-			default: '',
+			default: null,
 		},
 
 		/**
@@ -450,22 +456,6 @@ export default {
 			return this.details !== ''
 		},
 
-		// This is used to decide which outer element type to use
-		// li or router-link
-		navElement() {
-			if (this.to !== '') {
-				return {
-					is: 'router-link',
-					tag: 'li',
-					to: this.to,
-					exact: this.exact,
-				}
-			}
-			return {
-				is: 'li',
-			}
-		},
-
 		oneLine() {
 			return !this.hasSubtitle && !this.showDetails
 		},
diff --git a/src/components/NcVNodes/NcVNodes.vue b/src/components/NcVNodes/NcVNodes.vue
index fa27f7c631..bbdb40c2f5 100644
--- a/src/components/NcVNodes/NcVNodes.vue
+++ b/src/components/NcVNodes/NcVNodes.vue
@@ -29,7 +29,7 @@ export default {
 		 */
 		vnodes: {
 			type: [Array, Object],
-			default: () => [],
+			default: null,
 		},
 	},
 	/**
@@ -39,7 +39,7 @@ export default {
 	 * @return {object} The created VNode
 	 */
 	render(h) {
-		return this.vnodes
+		return this.vnodes || this.$slots?.default || this.$scopedSlots?.default?.()
 	},
 }
 </script>