diff --git a/api-generator/components/menubar.js b/api-generator/components/menubar.js
index 549d8c047..675607011 100644
--- a/api-generator/components/menubar.js
+++ b/api-generator/components/menubar.js
@@ -4,6 +4,12 @@ const MenubarProps = [
type: "array",
default: "null",
description: "An array of menuitems."
+ },
+ {
+ name: "exact",
+ type: "boolean",
+ default: "true",
+ description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
}
];
diff --git a/src/components/menubar/Menubar.d.ts b/src/components/menubar/Menubar.d.ts
index b7d34a09e..f443f01ce 100755
--- a/src/components/menubar/Menubar.d.ts
+++ b/src/components/menubar/Menubar.d.ts
@@ -2,6 +2,7 @@ import { VNode } from 'vue';
interface MenubarProps {
model?: any[];
+ exact?: boolean;
}
declare class Menubar {
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index 5935650c4..4833a91da 100755
--- a/src/components/menubar/Menubar.vue
+++ b/src/components/menubar/Menubar.vue
@@ -6,7 +6,8 @@
-
Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the item template that receives the menuitem instance from the model as a parameter.
<Menubar :model="items">
@@ -169,6 +169,18 @@ export default {
</template>
</Menubar>
+
+
+router-link with route configuration can also be used within templating for further customization.
+
+<Menubar :model="items">
+ <template #item="{item}">
+ <router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}">
+ <a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}>{{route.fullPath}}</a>
+ </router-link>
+ </template>
+</Menubar>
+