Finding a simple solution may be challenging, but I have crafted an example specifically for you. To customize it to your liking, all you need to do is adjust the CSS. This approach demonstrates one method of achieving the desired outcome.
Check out the example here
<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>