Implementing an Adaptive Menu Bar in Vue with a Dynamic "More" Button

Background

Our company's navigation menu is dynamically configurable; some pages have many menu items while others have few. When the number of items exceeds the available width we initially used a horizontal scrollbar, which the client complained about as ugly.

Technical Solution

Base Component Development

We created a reusable Vue component AdaptiveMenuBar.vue that renders the menu area and a "More" button when items overflow.

<template>
    <div class="adaptive-menu-bar"></div>
</template>

<style lang="less" scoped>
.adaptive-menu-bar{
    width: 100%;
    height: 48px;
    background: gainsboro;
    display: flex;
    position: relative;
    overflow: hidden;
}
</style>

We added mock data for demonstration.

<template>
    <div class="adaptive-menu-bar">
        <div class="origin-menu-item-wrap">
            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">
                {{ item.name }}
            </div>
        </div>
        <div>更多</div>
    </div>
</template>

<script setup>
const menuOriginData = [
    { name: '哆啦a梦', id: 1 },
    { name: '宇智波佐助', id: 1 },
    { name: '香蕉之王奥德彪', id: 1 },
    { name: '漩涡鸣人', id: 1 },
    { name: '雏田', id: 1 },
    { name: '大雄', id: 1 },
    { name: '源静香', id: 1 },
    { name: '骨川小夫', id: 1 },
    { name: '超级马里奥', id: 1 },
    { name: '自来也', id: 1 },
    { name: '孙悟空', id: 1 },
    { name: '卡卡罗特', id: 1 },
    { name: '万年老二贝吉塔', id: 1 },
    { name: '小泽玛丽', id: 1 }
];
</script>

Implementation Idea

We calculate which menu items exceed the visible area by comparing the scrollWidth of the container with its clientWidth . Items beyond the cutoff are moved into the "More" dropdown.

More Button Display Logic

The button appears only when the container's scrollWidth is greater than its clientWidth .

<template>
  <div ref="menuBarRef" class="origin-menu-item-wrap">
      <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">
        <m-button type="default" size="small">{{ item.name }}</m-button>
      </div>
  </div>
</template>
<script setup>
const menuOriginData = [
    { name: '哆啦a梦', id: 1 },
    { name: '宇智波佐助', id: 1 },
    { name: '香蕉之王奥德彪', id: 1 },
    { name: '漩涡鸣人', id: 1 },
    { name: '雏田', id: 1 },
    { name: '大雄', id: 1 },
    { name: '源静香', id: 1 },
    { name: '骨川小夫', id: 1 },
    { name: '超级马里奥', id: 1 },
    { name: '自来也', id: 1 },
    { name: '孙悟空', id: 1 },
    { name: '卡卡罗特', id: 1 },
    { name: '万年老二贝吉塔', id: 1 },
    { name: '小泽玛丽', id: 1 }
];
/* 是否展示更多按钮 */
const showMoreBtn = ref(false);

onMounted(() => {
  const menuWrapDom = menuBarRef.value;
  if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {
    showMoreBtn.value = true;
  }
});
</script>

Cutoff Position Calculation

We sum the widths of .menu-item elements until the total exceeds the container width, then slice the data array at that index.

<template>
  <div ref="menuBarRef" class="origin-menu-item-wrap">
      <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">
        <m-button type="default" size="small">{{ item.name }}</m-button>
      </div>
  </div>
</template>
<script setup>
const menuOriginData = [
    { name: '哆啦a梦', id: 1 },
    { name: '宇智波佐助', id: 1 },
    { name: '香蕉之王奥德彪', id: 1 },
    { name: '漩涡鸣人', id: 1 },
    { name: '雏田', id: 1 },
    { name: '大雄', id: 1 },
    { name: '源静香', id: 1 },
    { name: '骨川小夫', id: 1 },
    { name: '超级马里奥', id: 1 },
    { name: '自来也', id: 1 },
    { name: '孙悟空', id: 1 },
    { name: '卡卡罗特', id: 1 },
    { name: '万年老二贝吉塔', id: 1 },
    { name: '小泽玛丽', id: 1 }
];
/* 是否展示更多按钮 */
const showMoreBtn = ref(false);

onMounted(() => {
    const menuWrapDom = menuBarRef.value;
    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {
        showMoreBtn.value = true;
    }
    // 计算截断菜单的索引位置
    let sliceIndex = 0;
    const menuItemNodeList = menuWrapDom.querySelectorAll('.menu-item');
    const nodeArray = Array.prototype.slice.call(menuItemNodeList);
    let addWidth = 0;
    for (let i = 0; i < nodeArray.length; i++) {
        const node = nodeArray[i];
        // clientWidth不包含 margin，手动补 12px
        addWidth += node.clientWidth + 12;
        // 76 是更多按钮的宽度，需要计入
        if (addWidth + 76 > menuWrapDom.clientWidth) {
            sliceIndex = i;
            break;
        } else {
            sliceIndex = 0;
        }
    }
    // 根据 sliceIndex 更新显示的列表（后续代码省略）
});
</script>

Style Re‑arrangement

Two menu lists are rendered: the original (hidden) for measurement and the adjusted list for display, plus the "More" button that shows the overflow items.

<template>
    <div class="adaptive-menu-bar">
<div ref="menuBarRef" class="origin-menu-item-wrap">
            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">
                {{ item.name }}
            </div>
        </div>
<div v-for="(item, index) in menuList" :key="index" class="menu-item">
            {{ item.name }}
        </div>
<div v-if="showMoreBtn" class="dropdown-wrap">
            更多
<div class="menu-item-wrap">
                <div v-for="(item, index) in menuOriginData.slice(menuList.length)" :key="index">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

Code Implementation

Basic Functionality

On window resize we recompute the layout to keep the menu responsive.

const menuOriginData = [
    { name: '哆啦a梦', id: 1 },
    { name: '宇智波佐助', id: 1 },
    { name: '香蕉之王奥德彪', id: 1 },
    { name: '漩涡鸣人', id: 1 },
    { name: '雏田', id: 1 },
    { name: '大雄', id: 1 },
    { name: '源静香', id: 1 },
    { name: '骨川小夫', id: 1 },
    { name: '超级马里奥', id: 1 },
    { name: '自来也', id: 1 },
    { name: '孙悟空', id: 1 },
    { name: '卡卡罗特', id: 1 },
    { name: '万年老二贝吉塔', id: 1 },
    { name: '小泽玛丽', id: 1 }
];

// 是否展示更多按钮
const showMoreBtn = ref(false);

const setHeaderStyle = () => {
    const menuWrapDom = menuBarRef.value;
    if (!menuWrapDom) return;
    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {
        showMoreBtn.value = true;
    } else {
        showMoreBtn.value = false;
    }
    const menuItemNodeList = menuWrapDom.querySelectorAll('.menu-item');
    if (menuItemNodeList) {
        let addWidth = 0,
            sliceIndex = 0;
        const nodeArray = Array.prototype.slice.call(menuItemNodeList);
        for (let i = 0; i < nodeArray.length; i++) {
            const node = nodeArray[i];
            addWidth += node.clientWidth + 12;
            if (addWidth + 64 + 12 > menuWrapDom.clientWidth) {
                sliceIndex = i;
                break;
            } else {
                sliceIndex = 0;
            }
        }
        if (sliceIndex > 0) {
            menuList.value = menuOriginData.slice(0, sliceIndex);
        } else {
            menuList.value = menuOriginData;
        }
    }
};

window.addEventListener('resize', () => setHeaderStyle());

onMounted(() => {
    setHeaderStyle();
});

Full Component Code

The complete component (template, script, style) is provided without third‑party UI dependencies.

<template>
    <div class="adaptive-menu-bar">
        <!-- 原始渲染的菜单栏 -->
        <div ref="menuBarRef" class="origin-menu-item-wrap">
            <div v-for="(item, index) in menuOriginData" :key="index" class="menu-item">
                {{ item.name }}
            </div>
        </div>

        <!-- 计算优化显示的菜单栏 -->
        <div v-for="(item, index) in menuList" :key="index" class="menu-item">
            {{ item.name }}
        </div>

        <!-- 更多按钮 -->
        <div v-if="showMoreBtn" class="dropdown-wrap">
            更多
            <!-- 更多里面的菜单 -->
            <div class="menu-item-wrap">
                <div v-for="(item, index) in menuOriginData.slice(menuList.length)" :key="index">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { IconMeriComponentArrowDown } from 'meri-icon';

const menuBarRef = ref();
const open = ref(false);

const menuOriginData = [
    { name: '哆啦a梦', id: 1 },
    { name: '宇智波佐助', id: 1 },
    { name: '香蕉之王奥德彪', id: 1 },
    { name: '漩涡鸣人', id: 1 },
    { name: '雏田', id: 1 },
    { name: '大雄', id: 1 },
    { name: '源静香', id: 1 },
    { name: '骨川小夫', id: 1 },
    { name: '超级马里奥', id: 1 },
    { name: '自来也', id: 1 },
    { name: '孙悟空', id: 1 },
    { name: '卡卡罗特', id: 1 },
    { name: '万年老二贝吉塔', id: 1 },
    { name: '小泽玛丽', id: 1 }
];

const menuList = ref(menuOriginData);
const showMoreBtn = ref(false);

const setHeaderStyle = () => {
    const menuWrapDom = menuBarRef.value;
    if (!menuWrapDom) return;
    if (menuWrapDom.scrollWidth > menuWrapDom.clientWidth) {
        showMoreBtn.value = true;
    } else {
        showMoreBtn.value = false;
    }
    const menuItemNodeList = menuWrapDom.querySelectorAll('.menu-item');
    if (menuItemNodeList) {
        let addWidth = 0,
            sliceIndex = 0;
        const nodeArray = Array.prototype.slice.call(menuItemNodeList);
        for (let i = 0; i < nodeArray.length; i++) {
            const node = nodeArray[i];
            addWidth += node.clientWidth + 12;
            if (addWidth + 64 + 12 > menuWrapDom.clientWidth) {
                sliceIndex = i;
                break;
            } else {
                sliceIndex = 0;
            }
        }
        if (sliceIndex > 0) {
            menuList.value = menuOriginData.slice(0, sliceIndex);
        } else {
            menuList.value = menuOriginData;
        }
    }
};

window.addEventListener('resize', () => setHeaderStyle());

onMounted(() => {
    setHeaderStyle();
});
</script>

<style lang="less" scoped>
.adaptive-menu-bar {
    width: 100%;
    height: 48px;
    background: gainsboro;
    display: flex;
    position: relative;
    align-items: center;
    overflow: hidden;
    .origin-menu-item-wrap {
        width: 100%;
        display: flex;
        position: absolute;
        top: 49px;
        left: 0;
        right: 0;
        bottom: 0;
        height: 48px;
        z-index: 9;
    }
    .menu-item {
        margin-left: 12px;
    }
    .dropdown-wrap {
        width: 64px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: center;
        height: 28px;
        background: #fff;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #c4c9cf;
        margin-left: 12px;
        .icon {
            width: 16px;
            height: 16px;
            margin-left: 4px;
        }
    }
}
</style>

Result

The adaptive menu bar works smoothly; overflow items are neatly placed under a "More" button, providing a clean and responsive navigation experience.