如何创建带弹出菜单的响应式面包屑导航？

要实现内容过长时自动将中间项放入弹出菜单的面包屑，需要结合HTML结构调整、CSS样式控制和JavaScript逻辑判断，具体实现步骤如下：

1. 调整HTML结构 #

在原面包屑列表中新增下拉菜单容器，用来容纳被折叠的中间元素：

<div>
  <nav>
    <ul class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Home</a></li>
      <li class="breadcrumb-item"><a href="#">Tutorials1</a></li>
      <!-- 下拉菜单容器 -->
      <li class="breadcrumb-item dropdown hidden">
        <button class="dropdown-trigger">...</button>
        <ul class="dropdown-menu"></ul>
      </li>
      <li class="breadcrumb-item"><a href="#">Tutorials6</a></li>
      <li class="breadcrumb-item"><a href="#">Tutorials7</a></li>
      <li class="breadcrumb-item"><a href="#">Tutorials8</a></li>
      <!-- 标记可折叠的中间项 -->
      <li class="breadcrumb-item collapsible"><a href="#">Tutorials2</a></li>
      <li class="breadcrumb-item collapsible"><a href="#">Tutorials3</a></li>
      <li class="breadcrumb-item collapsible"><a href="#">Tutorials4</a></li>
      <li class="breadcrumb-item collapsible"><a href="#">Tutorials5</a></li>
    </ul>
  </nav>
</div>

2. 编写基础CSS样式 #

设置面包屑横向布局、响应式适配及下拉菜单样式：

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 8px;
}

.breadcrumb-item {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
  content: ">";
  margin: 0 8px;
}

/* 下拉菜单样式 */
.dropdown {
  position: relative;
}

.dropdown-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 8px 0;
  margin: 4px 0 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  min-width: 150px;
}

.dropdown-menu .breadcrumb-item {
  padding: 4px 16px;
}

.dropdown-menu .breadcrumb-item::after {
  display: none;
}

/* 辅助控制类 */
.hidden {
  display: none !important;
}

.collapsible {
  display: none;
}

3. 实现JavaScript逻辑 #

通过检测容器宽度，动态控制中间项的显示与折叠：

function handleBreadcrumbCollapse() {
  const breadcrumb = document.querySelector('.breadcrumb');
  const dropdown = breadcrumb.querySelector('.dropdown');
  const dropdownMenu = dropdown.querySelector('.dropdown-menu');
  const collapsibleItems = breadcrumb.querySelectorAll('.collapsible');
  const visibleItems = breadcrumb.querySelectorAll('.breadcrumb-item:not(.collapsible):not(.dropdown)');
  
  // 清空下拉菜单
  dropdownMenu.innerHTML = '';
  
  // 计算可见项总宽度与容器宽度
  const containerWidth = breadcrumb.offsetWidth;
  let totalVisibleWidth = 0;
  visibleItems.forEach(item => totalVisibleWidth += item.offsetWidth);
  
  // 根据宽度判断是否折叠
  if (totalVisibleWidth > containerWidth) {
    dropdown.classList.remove('hidden');
    // 将折叠项复制到下拉菜单
    collapsibleItems.forEach(item => {
      const clone = item.cloneNode(true);
      clone.classList.remove('collapsible');
      dropdownMenu.appendChild(clone);
    });
  } else {
    dropdown.classList.add('hidden');
    // 恢复显示所有折叠项
    collapsibleItems.forEach(item => item.classList.remove('collapsible'));
  }
}

// 页面加载和窗口尺寸变化时触发
window.addEventListener('load', handleBreadcrumbCollapse);
window.addEventListener('resize', handleBreadcrumbCollapse);

逻辑说明 #

• 页面初始化或窗口 resize 时，自动计算可见面包屑项的总宽度
• 当总宽度超出容器宽度时，隐藏中间可折叠项，将其复制到下拉菜单中展示
• 容器宽度足够时，自动显示所有面包屑项并隐藏下拉按钮

内容的提问来源于stack exchange，提问作者Lowterm