diff --git a/api-generator/components/menu.js b/api-generator/components/menu.js
index 7a928a06c..cd75e0365 100644
--- a/api-generator/components/menu.js
+++ b/api-generator/components/menu.js
@@ -49,6 +49,14 @@ const MenuEvents = [
];
const MenuSlots = [
+ {
+ name: 'start',
+ description: 'Custom content before the content'
+ },
+ {
+ name: 'end',
+ description: 'Custom content after the content'
+ },
{
name: 'item',
description: 'Template of a menuitem.'
diff --git a/components/menu/Menu.d.ts b/components/menu/Menu.d.ts
index e72c4118b..a36795045 100755
--- a/components/menu/Menu.d.ts
+++ b/components/menu/Menu.d.ts
@@ -49,6 +49,14 @@ export interface MenuProps {
}
export interface MenuSlots {
+ /**
+ * Custom start template.
+ */
+ start: () => VNode[];
+ /**
+ * Custom end template.
+ */
+ end: () => VNode[];
/**
* Custom item template.
* @param {Object} scope - item slot's params.
diff --git a/components/menu/Menu.vue b/components/menu/Menu.vue
index 487d0a1f9..84910f1eb 100644
--- a/components/menu/Menu.vue
+++ b/components/menu/Menu.vue
@@ -2,6 +2,9 @@
+
Menu offers content customization with the item template that receives the menuitem instance from the model as a parameter.
+Two slots named "start" and "end" are provided to embed content before or after the menu. In additon Menu, offers item customization with the item template that receives the menuitem instance from the model as a parameter.
<Menu :model="items">
+ <template #start>
+ Start
+ </template>
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
+ <template #end>
+ End
+ </template>
</Menu>
@@ -265,6 +271,14 @@ toggle(event) {