From 573833d46a7f4e5b062b7433823511fc2f049394 Mon Sep 17 00:00:00 2001
From: Christian Hartmann <chris-hartmann@gmx.de>
Date: Wed, 1 Jul 2026 00:34:45 +0200
Subject: [PATCH] feat(NcActions): add wide prop for full-width menus

feat(NcActions): add wide prop for full-width menus

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

[skip ci]
---
 src/components/NcActions/NcActions.vue | 93 ++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 026772817c..01a47cf9ef 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -545,6 +545,86 @@ export default {
 </script>
 ```
 
+### Wide buttons
+
+```vue
+<template>
+	<NcActions menu-name="Object management" wide>
+		<template #icon>
+			<IconPencilOutline :size="20" />
+		</template>
+		<NcActionButton>
+			<template #icon>
+				<IconPencilOutline :size="20" />
+			</template>
+			Rename
+		</NcActionButton>
+		<NcActionButton>
+			<template #icon>
+				<IconTrashCanOutline :size="20" />
+			</template>
+			Delete
+		</NcActionButton>
+		<NcActionButton>
+			<template #icon>
+				<IconArrowRight :size="20" />
+			</template>
+			Validate
+		</NcActionButton>
+		<NcActionButton>
+			<template #icon>
+				<IconTrayArrowDown :size="20" />
+			</template>
+			Download
+		</NcActionButton>
+	</NcActions>
+	<NcActions wide>
+		<template #icon>
+			<IconPencilOutline :size="20" />
+		</template>
+		<NcActionButton>
+			<template #icon>
+				<IconPencilOutline :size="20" />
+			</template>
+			Rename
+		</NcActionButton>
+		<NcActionButton>
+			<template #icon>
+				<IconTrashCanOutline :size="20" />
+			</template>
+			Delete
+		</NcActionButton>
+		<NcActionButton>
+			<template #icon>
+				<IconArrowRight :size="20" />
+			</template>
+			Validate
+		</NcActionButton>
+		<NcActionButton>
+			<template #icon>
+				<IconTrayArrowDown :size="20" />
+			</template>
+			Download
+		</NcActionButton>
+	</NcActions>
+</template>
+<script>
+import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
+import IconTrayArrowDown from 'vue-material-design-icons/TrayArrowDown.vue'
+import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
+
+export default {
+	components: {
+		IconArrowRight,
+		IconTrashCanOutline,
+		IconTrayArrowDown,
+		IconPencilOutline,
+	},
+}
+</script>
+```
+
 ### Use cases
 
 ```vue
@@ -1178,6 +1258,14 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Specifies whether the button should span all the available width.
+		 */
+		wide: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Specify the size used for trigger and single actions buttons.
 		 *
@@ -2072,6 +2160,7 @@ export default {
 					`action-item--${this.triggerButtonVariant}`,
 					{
 						'action-item--open': this.opened,
+						'action-item--wide': this.wide,
 					},
 				],
 			},
@@ -2124,6 +2213,10 @@ export default {
 		background-color: var(--open-background-color);
 	}
 
+	&.action-item--wide {
+		width: 100%;
+	}
+
 	&__menutoggle__icon {
 		width: 20px;
 		height: 20px;