diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
index 6aa5b47523..f30486bf92 100644
--- a/src/assets/NcAppNavigationItem.scss
+++ b/src/assets/NcAppNavigationItem.scss
@@ -263,6 +263,17 @@
 	}
 }
 
+// When the parent list renders a sliding highlight, suppress the per-entry
+// hover/focus background of non-active entries so only the moving highlight
+// is visible. Active entries keep their own static highlight and stripe.
+// The leading list class keeps these more specific than the rules above.
+.app-navigation-list--animated-highlight {
+	.app-navigation-entry:not(.active):hover,
+	.app-navigation-entry:not(.active):focus-within {
+		background-color: transparent !important;
+	}
+}
+
 @keyframes nc-nav-stripe-in {
 	from {
 		transform: scaleY(0);
diff --git a/src/components/NcAppNavigationList/NcAppNavigationList.vue b/src/components/NcAppNavigationList/NcAppNavigationList.vue
index 75e0576a33..681434f55b 100644
--- a/src/components/NcAppNavigationList/NcAppNavigationList.vue
+++ b/src/components/NcAppNavigationList/NcAppNavigationList.vue
@@ -8,6 +8,12 @@
 
 List wrapper for use in NcAppNavigation.
 
+The list renders a single hover/focus highlight that slides between entries
+instead of every entry painting its own hover background. When it slides onto
+the active entry it turns transparent, so the active entry keeps its own
+static highlight while the motion stays continuous. If JavaScript does not run
+the per-entry hover background is used as a fallback.
+
 #### Example
 
 Usage with NcAppNavigationCaption as a heading.
@@ -30,15 +36,148 @@ Usage with NcAppNavigationCaption as a heading.
 </docs>
 
 <template>
-	<ul class="app-navigation-list">
+	<ul
+		ref="list"
+		class="app-navigation-list"
+		:class="{ 'app-navigation-list--animated-highlight': enabled }"
+		@pointerover="handle"
+		@pointerleave="hide"
+		@focusin="handle"
+		@focusout="onFocusOut">
+		<div
+			v-if="enabled"
+			class="app-navigation-list__highlight"
+			:class="{
+				'app-navigation-list__highlight--visible': visible,
+				'app-navigation-list__highlight--animated': animated,
+				'app-navigation-list__highlight--over-active': overActive,
+			}"
+			:style="highlightStyle"
+			aria-hidden="true" />
 		<slot />
 	</ul>
 </template>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
 	name: 'NcAppNavigationList',
-}
+
+	data() {
+		return {
+			/** Whether the moving highlight is active (JS mounted) */
+			enabled: false,
+			/** Whether the highlight is currently shown */
+			visible: false,
+			/** Whether position changes should transition (slide) or snap */
+			animated: false,
+			/** Whether the highlight sits on the active entry (turns transparent) */
+			overActive: false,
+			/** Vertical offset of the highlight inside the scrollable content */
+			top: 0,
+			/** Height of the highlight */
+			height: 0,
+		}
+	},
+
+	computed: {
+		highlightStyle(): Record<string, string> {
+			return {
+				transform: `translateY(${this.top}px)`,
+				height: `${this.height}px`,
+			}
+		},
+	},
+
+	mounted() {
+		// Progressive enhancement: the sliding highlight only runs once mounted,
+		// otherwise the per-entry hover background (see styles) is the fallback.
+		this.enabled = true
+	},
+
+	methods: {
+		/**
+		 * Show the highlight on the given entry. It slides there if already
+		 * visible, otherwise it snaps into place to avoid sliding in from a
+		 * previously hovered entry. Over the active entry it turns transparent
+		 * so the active entry keeps its own static highlight.
+		 *
+		 * @param entry the entry element to cover
+		 */
+		showOn(entry: HTMLElement) {
+			const list = this.$refs.list as HTMLElement
+			const entryRect = entry.getBoundingClientRect()
+			const listRect = list.getBoundingClientRect()
+			const top = entryRect.top - listRect.top + list.scrollTop
+			const height = entryRect.height
+			this.overActive = entry.classList.contains('active')
+			if (this.visible) {
+				this.animated = true
+				this.top = top
+				this.height = height
+				return
+			}
+			// Re-appearing: snap to the new position without sliding, then fade in
+			this.animated = false
+			this.top = top
+			this.height = height
+			this.visible = true
+			this.$nextTick(() => requestAnimationFrame(() => {
+				this.animated = true
+			}))
+		},
+
+		/** Hide the highlight */
+		hide() {
+			this.visible = false
+		},
+
+		/**
+		 * Find the entry element a given event target belongs to, or null if the
+		 * event did not land on an eligible entry of this list.
+		 *
+		 * @param event the pointer or focus event
+		 */
+		entryFromEvent(event: Event): HTMLElement | null {
+			const target = event.target as HTMLElement | null
+			const entry = target?.closest<HTMLElement>('.app-navigation-entry')
+			// Ignore entries that are being edited (they have their own UI)
+			if (!entry || entry.classList.contains('app-navigation-entry--editing')) {
+				return null
+			}
+			return (this.$refs.list as HTMLElement).contains(entry) ? entry : null
+		},
+
+		/**
+		 * Move the highlight to the entry under the pointer or focus
+		 *
+		 * @param event the pointer or focus event
+		 */
+		handle(event: Event) {
+			const entry = this.entryFromEvent(event)
+			// Not over an entry (e.g. the gap between entries): keep the current
+			// state so the highlight can slide across to the next entry. The
+			// highlight slides onto every entry, including the active one (where it
+			// becomes transparent), so the motion stays continuous.
+			if (entry) {
+				this.showOn(entry)
+			}
+		},
+
+		/**
+		 * Hide the highlight once focus leaves the list entirely
+		 *
+		 * @param event the focusout event
+		 */
+		onFocusOut(event: FocusEvent) {
+			const list = this.$refs.list as HTMLElement
+			if (!list.contains(event.relatedTarget as Node | null)) {
+				this.hide()
+			}
+		},
+	},
+})
 </script>
 
 <style lang="scss" scoped>
@@ -51,5 +190,49 @@ export default {
 	flex-direction: column;
 	gap: var(--default-grid-baseline, 4px);
 	padding: var(--app-navigation-padding);
+	isolation: isolate; // keep the highlight layered predictably within the list
+
+	&__highlight {
+		position: absolute;
+		inset-inline: var(--app-navigation-padding);
+		top: 0;
+		height: 0;
+		// As the first positioned child it paints below the entry wrappers
+		// (also positioned), so it sits behind the entry content.
+		z-index: 0;
+		pointer-events: none;
+		opacity: 0;
+		border-radius: var(--border-radius-element);
+		// Matches the per-entry hover background of non-legacy entries.
+		background-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);
+		will-change: transform, height;
+		// The fade and the background morph are always transitioned; sliding is
+		// opt-in via --animated so the highlight snaps when it (re)appears.
+		transition:
+			opacity var(--animation-quick) ease-in-out,
+			background-color var(--animation-quick) ease-in-out;
+
+		&--animated {
+			transition:
+				transform var(--animation-quick) ease-in-out,
+				height var(--animation-quick) ease-in-out,
+				opacity var(--animation-quick) ease-in-out,
+				background-color var(--animation-quick) ease-in-out;
+		}
+
+		&--visible {
+			opacity: 1;
+		}
+
+		// Over the active entry the highlight turns transparent so the active
+		// entry's own static highlight shows through unchanged, while the
+		// highlight still slides on and off it for a continuous motion.
+		&--over-active {
+			background-color: transparent;
+		}
+	}
+	// Reduced motion is handled globally: the --animation-quick variable is
+	// collapsed under a prefers-reduced-motion media query by the server theme,
+	// so these transitions become instant without a component-level override.
 }
 </style>
diff --git a/tests/unit/components/NcAppNavigationList/NcAppNavigationList.spec.js b/tests/unit/components/NcAppNavigationList/NcAppNavigationList.spec.js
new file mode 100644
index 0000000000..0afd64d341
--- /dev/null
+++ b/tests/unit/components/NcAppNavigationList/NcAppNavigationList.spec.js
@@ -0,0 +1,153 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import NcAppNavigationList from '../../../../src/components/NcAppNavigationList/NcAppNavigationList.vue'
+
+/**
+ * Stub getBoundingClientRect, which jsdom always reports as zero.
+ *
+ * @param {Element} el the element to stub
+ * @param {number} top the top offset to report
+ * @param {number} height the height to report
+ */
+function setRect(el, top, height) {
+	el.getBoundingClientRect = () => ({
+		top,
+		height,
+		bottom: top + height,
+		left: 0,
+		right: 0,
+		width: 0,
+		x: 0,
+		y: top,
+		toJSON: () => ({}),
+	})
+}
+
+/**
+ * Mount the list with three entries: a plain one, the active one and an entry
+ * that is being edited, each with a stubbed geometry.
+ */
+function mountList() {
+	const wrapper = mount(NcAppNavigationList, {
+		slots: {
+			default: '<div class="app-navigation-entry" data-id="one">One</div>'
+				+ '<div class="app-navigation-entry active" data-id="two">Two</div>'
+				+ '<div class="app-navigation-entry app-navigation-entry--editing" data-id="three">Three</div>',
+		},
+	})
+	setRect(wrapper.element, 0, 300)
+	const entries = wrapper.findAll('.app-navigation-entry')
+	setRect(entries[0].element, 0, 44)
+	setRect(entries[1].element, 50, 44)
+	setRect(entries[2].element, 100, 44)
+	return wrapper
+}
+
+describe('NcAppNavigationList.vue', () => {
+	let rafQueue = []
+
+	beforeEach(() => {
+		rafQueue = []
+		vi.stubGlobal('requestAnimationFrame', (cb) => rafQueue.push(cb))
+	})
+
+	afterEach(() => {
+		vi.unstubAllGlobals()
+	})
+
+	/** Run the queued requestAnimationFrame callbacks. */
+	const flushRaf = () => {
+		const queued = rafQueue
+		rafQueue = []
+		queued.forEach((cb) => cb())
+	}
+
+	it('enables the sliding highlight once mounted', async () => {
+		const wrapper = mountList()
+		expect(wrapper.vm.enabled).toBe(true)
+		await nextTick()
+		expect(wrapper.get('.app-navigation-list__highlight')).toBeTruthy()
+	})
+
+	it('shows and positions the highlight over the hovered entry', async () => {
+		const wrapper = mountList()
+
+		await wrapper.find('[data-id="one"]').trigger('pointerover')
+
+		expect(wrapper.vm.visible).toBe(true)
+		expect(wrapper.vm.top).toBe(0)
+		expect(wrapper.vm.height).toBe(44)
+		expect(wrapper.vm.overActive).toBe(false)
+	})
+
+	it('snaps when re-appearing, then enables sliding', async () => {
+		const wrapper = mountList()
+
+		await wrapper.find('[data-id="one"]').trigger('pointerover')
+		// Snapped into place: no transition yet, the rAF has not run
+		expect(wrapper.vm.animated).toBe(false)
+
+		flushRaf()
+		await nextTick()
+		// Sliding is enabled for subsequent moves
+		expect(wrapper.vm.animated).toBe(true)
+	})
+
+	it('slides (animates) when moving while already visible', async () => {
+		const wrapper = mountList()
+
+		await wrapper.find('[data-id="one"]').trigger('pointerover')
+		await wrapper.find('[data-id="two"]').trigger('pointerover')
+
+		expect(wrapper.vm.animated).toBe(true)
+		expect(wrapper.vm.top).toBe(50)
+	})
+
+	it('turns transparent over the active entry', async () => {
+		const wrapper = mountList()
+
+		await wrapper.find('[data-id="two"]').trigger('pointerover')
+
+		expect(wrapper.vm.overActive).toBe(true)
+		expect(wrapper.get('.app-navigation-list__highlight').classes())
+			.toContain('app-navigation-list__highlight--over-active')
+	})
+
+	it('ignores entries that are being edited', async () => {
+		const wrapper = mountList()
+
+		await wrapper.find('[data-id="three"]').trigger('pointerover')
+
+		expect(wrapper.vm.visible).toBe(false)
+	})
+
+	it('hides the highlight when the pointer leaves the list', async () => {
+		const wrapper = mountList()
+
+		await wrapper.find('[data-id="one"]').trigger('pointerover')
+		expect(wrapper.vm.visible).toBe(true)
+
+		await wrapper.trigger('pointerleave')
+		expect(wrapper.vm.visible).toBe(false)
+	})
+
+	it('hides only when focus leaves the list entirely', async () => {
+		const wrapper = mountList()
+		await wrapper.find('[data-id="one"]').trigger('focusin')
+		expect(wrapper.vm.visible).toBe(true)
+
+		// Focus moving to another entry inside the list keeps it visible
+		await wrapper.find('[data-id="two"]').element.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: wrapper.find('[data-id="one"]').element }))
+		expect(wrapper.vm.visible).toBe(true)
+
+		// Focus leaving the list hides it
+		await wrapper.find('[data-id="two"]').element.dispatchEvent(new FocusEvent('focusout', { bubbles: true, relatedTarget: document.body }))
+		expect(wrapper.vm.visible).toBe(false)
+	})
+})