diff --git a/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png
new file mode 100644
index 0000000000..c3d11a4ac4
Binary files /dev/null and b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry-menu-active.png differ
diff --git a/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png
new file mode 100644
index 0000000000..2d4cdf5428
Binary files /dev/null and b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-entry.png differ
diff --git a/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png
new file mode 100644
index 0000000000..ad36205d68
Binary files /dev/null and b/cypress/snapshots/base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-entry.png differ
diff --git a/cypress/visual/AppNavigationItem.cy.ts b/cypress/visual/AppNavigationItem.cy.ts
index 893ac589fb..7f10f036b2 100644
--- a/cypress/visual/AppNavigationItem.cy.ts
+++ b/cypress/visual/AppNavigationItem.cy.ts
@@ -7,7 +7,13 @@ import NcAppNavigationItem from '../../src/components/NcAppNavigationItem/NcAppN
 describe('NcAppNavigationItem', () => {
 	describe('With router link', () => {
 		const RouterComponent = defineComponent({
-			template: '<div style="width: 300px; background: white;"><NcAppNavigationItem name="Home" to="/" :editable="true" /><NcAppNavigationItem name="Foo" to="/foo" :editable="true" /></div>',
+			template: `
+			<div style="width: 300px; background: white;">
+				<NcAppNavigationItem name="Home" to="/" :editable="true" />
+				<NcAppNavigationItem name="Foo" to="/foo" :editable="true" />
+				<NcAppNavigationItem name="Back" active :editable="true" />
+				<NcAppNavigationItem name="Bar" :editable="true" />
+			</div>`,
 			components: { NcAppNavigationItem },
 		})
 
@@ -41,5 +47,20 @@ describe('NcAppNavigationItem', () => {
 			cy.contains('.app-navigation-entry', 'Home').find('.app-navigation-entry__actions').click()
 			cy.get('.app-navigation-entry--editing').compareSnapshot('NcAppNavigationItem-primary-on-active-route-menu-active')
 		})
+
+		// Entries without router
+
+		it('has tertiary styling on non active entry', () => {
+			cy.contains('.app-navigation-entry', 'Bar').compareSnapshot('NcAppNavigationItem-tertiary-non-active-entry')
+		})
+
+		it('has primary styling on active entry', () => {
+			cy.contains('.app-navigation-entry', 'Back').compareSnapshot('NcAppNavigationItem-primary-on-active-entry')
+		})
+
+		it('has primary button styling on active entry with editing=true', () => {
+			cy.contains('.app-navigation-entry', 'Back').find('.app-navigation-entry__actions').click()
+			cy.get('.app-navigation-entry--editing').compareSnapshot('NcAppNavigationItem-primary-on-active-entry-menu-active')
+		})
 	})
 })
diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
index 79dbfcc6c6..985bc87962 100644
--- a/src/assets/NcAppNavigationItem.scss
+++ b/src/assets/NcAppNavigationItem.scss
@@ -34,7 +34,7 @@
 		}
 
 		// overwrite active text color
-		.app-navigation-entry-link, .app-navigation-entry-button {
+		.app-navigation-entry-link {
 			color: var(--color-primary-element-text) !important;
 		}
 	}
@@ -68,14 +68,12 @@
 		display: none;
 	}
 
-	&:not(.app-navigation-entry--editing) {
-		.app-navigation-entry-link, .app-navigation-entry-button {
-			padding-right: $icon-margin;
-		}
+	&:not(.app-navigation-entry--editing) .app-navigation-entry-link {
+		padding-right: $icon-margin;
 	}
 
 	// Main entry link
-	.app-navigation-entry-link, .app-navigation-entry-button {
+	.app-navigation-entry-link {
 		z-index: 100; /* above the bullet to allow click*/
 		display: flex;
 		overflow: hidden;
diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
index 9fbdd26d54..75eb16a2cd 100644
--- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
+++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -1,7 +1,7 @@
 <docs>
 ```vue
 	<template>
-		<ul>
+		<ul class="nav">
 			<NcAppNavigationCaption
 				name="Your caption goes here">
 				<template #actions>
@@ -26,7 +26,7 @@
 	</script>
 	<style scoped>
 		/* mock the appnavigation */
-		ul {
+		ul.nav {
 			background-color: #cce6f4;
 		}
 	</style>
@@ -35,7 +35,7 @@
 ### Element with a slot for custom actions icon
 ```vue
 	<template>
-		<ul>
+		<ul class="nav">
 			<NcAppNavigationCaption
 				name="Your caption goes here">
 				<template #actionsTriggerIcon>
@@ -89,7 +89,7 @@
 	</script>
 	<style scoped>
 		/* mock the appnavigation */
-		ul {
+		ul.nav {
 			background-color: #cce6f4;
 		}
 	</style>
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 50e9e3eed6..00a05f079d 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -33,11 +33,13 @@
 
 ```vue
 	<template>
-		<NcAppNavigationItem name="My name">
-			<template #icon>
-				<Check :size="20" />
-			</template>
-		</NcAppNavigationItem>
+		<ul>
+			<NcAppNavigationItem name="My name">
+				<template #icon>
+					<Check :size="20" />
+				</template>
+			</NcAppNavigationItem>
+		</ul>
 	</template>
 	<script>
 	import Check from 'vue-material-design-icons/Check'
@@ -52,12 +54,16 @@
 * With a spinning loader instead of the icon:
 
 ```vue
-<NcAppNavigationItem name="Loading Item" :loading="true" />
+<ul>
+	<NcAppNavigationItem name="Loading Item" :loading="true" />
+</ul>
 ```
 * With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)
 
 ```vue
+<ul>
 	<NcAppNavigationItem name="Current page" :active="true" />
+</ul>
 ```
 
 ### Element with actions
@@ -67,30 +73,32 @@ button will be automatically created.
 ```vue
 	<template>
 		<div id="app-navigation-vue"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->
-			<NcAppNavigationItem name="Item with actions">
-				<template #icon>
-					<Check :size="20" />
-				</template>
-				<template #actions>
-					<NcActionButton @click="alert('Edit')">
-						<template #icon>
-							<Pencil :size="20" />
-						</template>
-						Edit
-					</NcActionButton>
-					<NcActionButton @click="alert('Delete')">
-						<template #icon>
-							<Delete :size="20" />
-						</template>
-						Delete
-					</NcActionButton>
-					<NcActionLink name="Link" href="https://nextcloud.com">
-						<template #icon>
-							<OpenInNew :size="20" />
-						</template>
-					</NcActionLink>
-				</template>
-			</NcAppNavigationItem>
+			<ul>
+				<NcAppNavigationItem name="Item with actions">
+					<template #icon>
+						<Check :size="20" />
+					</template>
+					<template #actions>
+						<NcActionButton @click="alert('Edit')">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							Edit
+						</NcActionButton>
+						<NcActionButton @click="alert('Delete')">
+							<template #icon>
+								<Delete :size="20" />
+							</template>
+							Delete
+						</NcActionButton>
+						<NcActionLink name="Link" href="https://nextcloud.com">
+							<template #icon>
+								<OpenInNew :size="20" />
+							</template>
+						</NcActionLink>
+					</template>
+				</NcAppNavigationItem>
+			</ul>
 		</div>
 	</template>
 	<script>
@@ -115,16 +123,18 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
 
 ```vue
 	<template>
-		<NcAppNavigationItem name="Item with counter">
-			<template #icon>
-				<Folder :size="20" />
-			</template>
-			<template #counter>
-				<NcCounterBubble>
-					99+
-				</NcCounterBubble>
-			</template>
-		</NcAppNavigationItem>
+		<ul>
+			<NcAppNavigationItem name="Item with counter">
+				<template #icon>
+					<Folder :size="20" />
+				</template>
+				<template #counter>
+					<NcCounterBubble>
+						99+
+					</NcCounterBubble>
+				</template>
+			</NcAppNavigationItem>
+		</ul>
 	</template>
 	<script>
 	import Folder from 'vue-material-design-icons/Folder'
@@ -144,41 +154,43 @@ prevent the user from collapsing the items.
 
 ```vue
 	<template>
-		<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
-			<template #icon>
-				<Folder :size="20" />
-			</template>
-			<template #counter>
-				<NcCounterBubble>
-					99+
-				</NcCounterBubble>
-			</template>
-			<template #actions>
-				<NcActionButton @click="alert('Edit')">
-					<template #icon>
-						<Pencil :size="20" />
-					</template>
-					Edit
-				</NcActionButton>
-				<NcActionButton @click="alert('Delete')">
-					<template #icon>
-						<Delete :size="20" />
-					</template>
-					Delete
-				</NcActionButton>
-				<NcActionLink name="Link" href="https://nextcloud.com">
-					<template #icon>
-						<OpenInNew :size="20" />
-					</template>
-				</NcActionLink>
-			</template>
-			<template>
-				<NcAppNavigationItem name="AppNavigationItemChild1" />
-				<NcAppNavigationItem name="AppNavigationItemChild2" />
-				<NcAppNavigationItem name="AppNavigationItemChild3" />
-				<NcAppNavigationItem name="AppNavigationItemChild4" />
-			</template>
-		</NcAppNavigationItem>
+		<ul>
+			<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
+				<template #icon>
+					<Folder :size="20" />
+				</template>
+				<template #counter>
+					<NcCounterBubble>
+						99+
+					</NcCounterBubble>
+				</template>
+				<template #actions>
+					<NcActionButton @click="alert('Edit')">
+						<template #icon>
+							<Pencil :size="20" />
+						</template>
+						Edit
+					</NcActionButton>
+					<NcActionButton @click="alert('Delete')">
+						<template #icon>
+							<Delete :size="20" />
+						</template>
+						Delete
+					</NcActionButton>
+					<NcActionLink name="Link" href="https://nextcloud.com">
+						<template #icon>
+							<OpenInNew :size="20" />
+						</template>
+					</NcActionLink>
+				</template>
+				<template>
+					<NcAppNavigationItem name="AppNavigationItemChild1" />
+					<NcAppNavigationItem name="AppNavigationItemChild2" />
+					<NcAppNavigationItem name="AppNavigationItemChild3" />
+					<NcAppNavigationItem name="AppNavigationItemChild4" />
+				</template>
+			</NcAppNavigationItem>
+		</ul>
 	</template>
 	<script>
 	import Folder from 'vue-material-design-icons/Folder'
@@ -203,12 +215,14 @@ the placeholder is the previous name of the element.
 
 ```vue
 	<template>
-		<NcAppNavigationItem name="Editable Item" :editable="true"
-			editPlaceholder="your_placeholder_here" @update:name="function(value){alert(value)}">
-			<template #icon>
-				<Folder :size="20" />
-			</template>
-		</NcAppNavigationItem>
+		<ul>
+			<NcAppNavigationItem name="Editable Item" :editable="true"
+				editPlaceholder="your_placeholder_here" @update:name="function(value){alert(value)}">
+				<template #icon>
+					<Folder :size="20" />
+				</template>
+			</NcAppNavigationItem>
+		</ul>
 	</template>
 	<script>
 	import Folder from 'vue-material-design-icons/Folder'
@@ -225,28 +239,35 @@ the placeholder is the previous name of the element.
 Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.
 
 ```
-<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')"  />
-
+<ul>
+	<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')"  />
+</ul>
 ```
 
 ### Link element
 Href that start by http will be treated as external and opened in a new tab
 ```
 <div>
-	<NcAppNavigationItem name="Files" href="/index.php/apps/files" />
-	<NcAppNavigationItem name="Nextcloud" href="https://nextcloud.com" />
+	<ul>
+		<NcAppNavigationItem name="Files" href="/index.php/apps/files" />
+		<NcAppNavigationItem name="Nextcloud" href="https://nextcloud.com" />
+	</ul>
 </div>
 ```
 
 ### Custom title
 ```
-<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
+<ul>
+	<NcAppNavigationItem name="Nextcloud" title="Open the Nextcloud website" href="https://nextcloud.com" />
+</ul>
 ```
 
 ### Pinned element
 Just set the `pinned` prop.
 ```
-<NcAppNavigationItem name="Pinned item" :pinned="true" />
+<ul>
+	<NcAppNavigationItem name="Pinned item" :pinned="true" />
+</ul>
 ```
 </docs>
 
@@ -298,7 +319,7 @@ Just set the `pinned` prop.
 						<NcInputConfirmCancel ref="editingInput"
 							v-model="editingValue"
 							:placeholder="editPlaceholder !== '' ? editPlaceholder : name"
-							:primary="isActive && to"
+							:primary="(isActive && to) || active"
 							@cancel="cancelEditing"
 							@confirm="handleEditingDone" />
 					</div>
@@ -328,7 +349,7 @@ Just set the `pinned` prop.
 						:boundaries-element="actionsBoundariesElement"
 						:placement="menuPlacement"
 						:open="menuOpen"
-						:type="isActive && to ? 'primary' : null"
+						:type="(isActive && to) || active ? 'primary' : null"
 						:force-menu="forceMenu"
 						:default-icon="menuIcon"
 						@update:open="onMenuToggle">