there is a navigation bar which has the menu items ,which is represented as tabs.
my concern is whenever the menu items exceeds the limit , and excess menu items which doesnt not fit should be moved to a dropdownin menu (showmore) vue
output image
<template>
<div class=”nav”>
<nav class=”navigation”>
<ul>
<li v-for=”(item, index) in groups” :key=”`nav-${index}`“ >
<router-link class=”router-link-
tab”:to=”item.name.toLowerCase()”>{item.name}</router-
link>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
name: ‘Tab’,
props: {
back: {
type: Boolean,
default: true,
},
},
</script>
Solution :
There is no easy with of doing it. You can take a look at this example I created for you. You will just need to adjust the css. But this is one way of doing it.
https://codesandbox.io/s/k1oz5vnl4r?fontsize=14
<template>
<div id=”app”>
<nav class=”navigation” ref=”nav”>
<div
style=”display: inline”
v-for=”(item, index) in groups”
:key=”`nav-${index}`“
:ref=”`nav-${index}`“
\>
<router-link
style=”margin: 0 16px”
:to=”item.name.toLowerCase()”
v-if=”maxNavItems == 0 || index < maxNavItems”
\>{item.name}</router-link>
</div>
<select v-model=”selected” ref=”dropdown”>
<option disabled value=”default”>Please select one</option>
<option v-for=”(item, index) in getDropdownItems()” :key=”`nav-${index}`“>{item.name}</option>
</select>
</nav>
</div>
</template>
<script>
export default {
name: “app”,
data: () => ({
groups: [
{ name: “NavItem1” },
{ name: “NavItem2” },
{ name: “NavItem3” },
{ name: “NavItem4” },
{ name: “NavItem5” },
{ name: “NavItem6” },
{ name: “NavItem7” },
{ name: “NavItem8” },
{ name: “NavItem9” },
{ name: “NavItem10” }
],
width: “”,
maxNavItems: 0,
selected: “default”
}),
async mounted() {
await this.$nextTick();
this.width = this.$refs[“nav”].offsetWidth;
let childrenTotalWidth = 0;
for (let i = 0; i < this.$refs[“nav”].children.length; i++) {
const child = this.$refs[“nav”].children[i];
childrenTotalWidth += child.offsetWidth;
if (childrenTotalWidth > this.width) {
this.maxNavItems = i - 1;
break;
}
}
},
methods: {
getDropdownItems() {
const newArr = [];
for (let i = this.maxNavItems; i < this.groups.length; i++) {
newArr.push(this.groups[i]);
}
return newArr;
}
}
};
</script>
<style>
#app {
margin: 60px;
}
.link {
display: inline-block;
padding: 10px;
}
.router-link-active {
color: green;
}
</style>