diff --git a/l10n/messages.pot b/l10n/messages.pot
index 59eba91aa8..40580f46cc 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -335,6 +335,9 @@ msgstr ""
 msgid "Search results"
 msgstr ""
 
+msgid "Search…"
+msgstr ""
+
 #. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
 msgid "sec. ago"
 msgstr ""
diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue
index e4de402d84..efab522019 100644
--- a/src/components/NcAppNavigation/NcAppNavigation.vue
+++ b/src/components/NcAppNavigation/NcAppNavigation.vue
@@ -56,7 +56,7 @@ emit('toggle-navigation', {
 				<slot name="list" />
 			</NcAppNavigationList>
 
-			<!-- Footer for e.g. NcAppNavigationSettings -->
+			<!-- @slot Footer for e.g. NcAppNavigationSettings -->
 			<slot name="footer" />
 		</nav>
 		<NcAppNavigationToggle :open="open" @update:open="toggleNavigation" />
@@ -69,7 +69,6 @@ import { getTrapStack } from '../../utils/focusTrap.js'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { createFocusTrap } from 'focus-trap'
 
-import NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'
 import NcAppNavigationList from '../NcAppNavigationList/index.js'
 import { warn } from 'vue'
 
@@ -159,7 +158,7 @@ export default {
 		 * @param {boolean} [state] set the state instead of inverting the current one
 		 */
 		toggleNavigation(state) {
-			// Early return if alreay in that state
+			// Early return if already in that state
 			if (this.open === state) {
 				emit('navigation-toggled', {
 					open: this.open,
@@ -206,7 +205,7 @@ export default {
 <style lang="scss">
 .app-navigation,
 .app-content {
-	/** Distance of the app naviation toggle and the first navigation item to the top edge of the app content container */
+	/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */
 	--app-navigation-padding: #{$app-navigation-padding};
 }
 </style>
@@ -243,6 +242,14 @@ export default {
 		margin-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));
 	}
 
+	&__search {
+		width: 100%;
+	}
+
+	&__body {
+		overflow-y: scroll;
+	}
+
 	// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot
 	// Same styles as NcAppNavigationList
 	&__content > ul {
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 50e013baa6..c3b21acb47 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -5,9 +5,9 @@
 
 <docs>
 
-# Usage
+### Usage
 
-### Simple element
+#### Simple element
 
 * With an icon:
 
@@ -46,7 +46,7 @@
 </ul>
 ```
 
-### Element with actions
+#### Element with actions
 Wrap the children in a template. If you have more than 2 actions, a popover menu and a menu
 button will be automatically created.
 
@@ -103,7 +103,7 @@ button will be automatically created.
 	</script>
 ```
 
-### Element with counter
+#### Element with counter
 Just nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.
 
 ```vue
@@ -132,7 +132,7 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
 	</script>
 ```
 
-### Element with children
+#### Element with children
 
 Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or
 prevent the user from collapsing the items.
@@ -199,7 +199,7 @@ prevent the user from collapsing the items.
 	</script>
 ```
 
-### Editable element
+#### Editable element
 Add the prop `:editable=true` and an edit placeholder if you need it. By default
 the placeholder is the previous name of the element.
 
@@ -230,7 +230,7 @@ the placeholder is the previous name of the element.
 	</script>
 ```
 
-### Undo element
+#### Undo element
 Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.
 
 ```vue
@@ -250,7 +250,7 @@ Just set the `undo` and `name` props. When clicking the undo button, an `undo` e
 	</script>
 ```
 
-### Link element
+#### Link element
 Href that start by http will be treated as external and opened in a new tab
 ```
 <div>
@@ -261,14 +261,14 @@ Href that start by http will be treated as external and opened in a new tab
 </div>
 ```
 
-### Custom title
+#### Custom title
 ```
 <ul>
 	<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
 </ul>
 ```
 
-### Pinned element
+#### Pinned element
 Just set the `pinned` prop.
 ```
 <ul>
diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
index 981225f664..e0a192684e 100644
--- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
+++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -4,9 +4,9 @@
 -->
 
 <docs>
-# Usage
+### Usage
 
-### New Item element
+#### New Item element
 ```vue
 	<template>
 		<NcAppNavigationNewItem name="New Item" @new-item="function(value){alert(value)}">
@@ -26,7 +26,7 @@
 	</script>
 ```
 
-### New Item element with a loading animation instead of the icon
+#### New Item element with a loading animation instead of the icon
 ```vue
 	<template>
 		<NcAppNavigationNewItem name="New Item" :loading="true">
diff --git a/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue b/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
new file mode 100644
index 0000000000..07f419444b
--- /dev/null
+++ b/src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
@@ -0,0 +1,272 @@
+<!--
+  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<docs>
+### Usage
+
+```vue
+<template>
+	<div class="styleguide-wrapper">
+		<NcContent app-name="styleguide-app-navigation" class="content-styleguidist">
+			<NcAppNavigation>
+				<template #search>
+					<NcAppNavigationSearch v-model="searchQuery">
+						<template #actions>
+							<NcActions aria-label="Filters">
+								<template #icon>
+									<IconFilter :size="20" />
+								</template>
+								<NcActionButton>
+									<template #icon>
+										<IconAccount :size="20" />
+									</template>
+									Filter by name
+								</NcActionButton>
+								<NcActionButton>
+									<template #icon>
+										<IconCalendarAccount :size="20" />
+									</template>
+									Filter by year
+								</NcActionButton>
+							</NcActions>
+							<NcButton aria-label="Search globally" type="tertiary">
+								<template #icon>
+									<IconSearchGlobal :size="20" />
+								</template>
+							</NcButton>
+						</template>
+					</NcAppNavigationSearch>
+				</template>
+				<template #list>
+					<NcAppNavigationItem name="First navigation entry">
+						<template #icon>
+							<IconStar :size="20" />
+						</template>
+					</NcAppNavigationItem>
+					<NcAppNavigationItem name="Second navigation entry">
+						<template #icon>
+							<IconStar :size="20" />
+						</template>
+					</NcAppNavigationItem>
+				</template>
+			</NcAppNavigation>
+			<NcAppContent>
+				<ul class="fake-content">
+					<li>Search query: {{ searchQuery }}</li>
+					<li v-for="(item, index) in items" :key="index">
+						{{ item }}
+					</li>
+				</ul>
+			</NcAppContent>
+		</NcContent>
+	</div>
+</template>
+<script>
+import IconAccount from 'vue-material-design-icons/Account.vue'
+import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
+import IconFilter from 'vue-material-design-icons/Filter.vue'
+import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
+import IconStar from 'vue-material-design-icons/Star.vue'
+
+const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']
+
+export default {
+	components: {
+		IconAccount,
+		IconCalendarAccount,
+		IconFilter,
+		IconSearchGlobal,
+		IconStar,
+	},
+
+	data() {
+		return {
+			searchQuery: '',
+		}
+	},
+
+	computed: {
+		items() {
+			return exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))
+		},
+	},
+}
+</script>
+<style scoped>
+/* This styles just mock NcContent and NcAppContent */
+.content-styleguidist {
+	position: relative !important;
+	margin: 0 !important;
+	/* prevent jumping */
+	min-height: 200px;
+}
+
+.content-styleguidist > * {
+	height: auto;
+}
+
+.fake-content {
+	padding: var(--app-navigation-padding);
+	padding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));
+}
+
+.styleguide-wrapper {
+	background-color: var(--color-background-plain);
+	padding: var(--body-container-margin);
+}
+</style>
+```
+</docs>
+<template>
+	<div class="app-navigation-search"
+		:class="{
+			'app-navigation-search--has-actions': hasActions(),
+		}">
+		<NcInputField ref="inputElement"
+			:aria-label="label"
+			class="app-navigation-search__input"
+			label-outside
+			:placeholder="placeholder ?? label"
+			show-trailing-button
+			:trailing-button-label="t('Clear search')"
+			type="search"
+			:value="modelValue"
+			@update:value="$emit('update:modelValue', $event)"
+			@trailing-button-click="onCloseSearch">
+			<template #trailing-button-icon>
+				<IconClose :size="20" />
+			</template>
+		</NcInputField>
+		<div v-if="hasActions()"
+			ref="actionsContainer"
+			class="app-navigation-search__actions"
+			:class="{
+				'app-navigation-search__actions--hidden': !showActions,
+				'hidden-visually': hideActions,
+			}">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { useFocusWithin } from '@vueuse/core'
+import { ref, nextTick, useSlots, watch } from 'vue'
+import { t } from '../../l10n.js'
+
+import IconClose from 'vue-material-design-icons/Close.vue'
+import NcInputField from '../NcInputField/NcInputField.vue'
+
+defineProps({
+	/**
+	 * Current search input
+	 */
+	modelValue: {
+		type: String,
+		default: '',
+	},
+	/**
+	 * Text used to label the search input
+	 */
+	label: {
+		type: String,
+		default: t('Search…'),
+	},
+
+	/**
+	 * Placeholder of the search input
+	 * By default the value of `label` is used.
+	 */
+	placeholder: {
+		type: String,
+		default: null,
+	},
+})
+
+const emit = defineEmits(['update:modelValue'])
+const slots = useSlots()
+
+const inputElement = ref()
+const { focused: inputHasFocus } = useFocusWithin(inputElement)
+
+/** Timeout used to define when the search input is fully expanded */
+const transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100
+
+/**
+ * @type {import('vue').Ref<import('vue').ComponentPublicInstance>}
+ */
+const actionsContainer = ref()
+const hasActions = () => !!slots.actions
+const showActions = ref(true)
+const timeoutId = ref()
+/** This is used to hide the actions after the transition is done */
+const hideActions = ref(false)
+watch(inputHasFocus, () => {
+	showActions.value = !inputHasFocus.value
+	window.clearTimeout(timeoutId.value)
+	if (showActions.value) {
+		hideActions.value = false
+	} else {
+		// If the transition is done, we fully hide the actions visually
+		window.setTimeout(() => {
+			hideActions.value = !showActions.value
+		}, transitionTimeout)
+	}
+})
+
+/**
+ * Handle close the search
+ */
+function onCloseSearch() {
+	emit('update:modelValue', '')
+	if (hasActions()) {
+		showActions.value = true
+		nextTick(() => actionsContainer.value.$el.querySelector('button')?.focus())
+	}
+}
+</script>
+
+<script>
+export default {
+	name: 'NcAppNavigationSearch',
+	model: {
+		event: 'update:modelValue',
+		prop: 'modelValue',
+	},
+}
+</script>
+
+<style scoped lang="scss">
+.app-navigation-search {
+	display: flex;
+	gap: var(--app-navigation-padding);
+	padding: var(--app-navigation-padding);
+
+	&--has-actions &__input {
+		flex-grow: 1;
+		z-index: 3;
+	}
+
+	&__actions {
+		display: flex;
+		gap: var(--default-grid-baseline);
+
+		margin-inline-start: 0;
+		max-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));
+		max-height: var(--default-clickable-area);
+
+		transition: margin-inline-start var(--animation-quick);
+
+		&--hidden {
+			margin-inline-start: calc(-1 * var(--default-clickable-area));
+		}
+	}
+
+	&__input {
+		// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there
+		--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;
+	}
+}
+</style>
diff --git a/src/components/NcAppNavigationSearch/index.js b/src/components/NcAppNavigationSearch/index.js
new file mode 100644
index 0000000000..b60247b1c1
--- /dev/null
+++ b/src/components/NcAppNavigationSearch/index.js
@@ -0,0 +1,6 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export { default } from './NcAppNavigationSearch.vue'
diff --git a/src/components/index.ts b/src/components/index.ts
index 971adf617e..8b7f409742 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,6 +25,7 @@ export { default as NcAppNavigationItem } from './NcAppNavigationItem/index.js'
 export { default as NcAppNavigationList } from './NcAppNavigationList/index.js'
 export { default as NcAppNavigationNew } from './NcAppNavigationNew/index.js'
 export { default as NcAppNavigationNewItem } from './NcAppNavigationNewItem/index.js'
+export { default as NcAppNavigationSearch } from './NcAppNavigationSearch/index.js'
 export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/index.js'
 export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.js'
 export { default as NcAppSettingsDialog } from './NcAppSettingsDialog/index.js'