Vaadin 24侧边导航：折叠时仅显示图标隐藏标签的实现方法

要实现折叠抽屉时仅保留图标、隐藏标签并固定60px宽度，可通过自定义CSS配合少量Java代码调整实现，具体步骤如下：

1. 给SideNav添加自定义类 #

在创建SideNav的代码中添加自定义类名，方便后续CSS精准定位：

SideNav nav = createSideNav();
nav.addClassName("compact-side-nav"); // 添加自定义类标识

2. 编写自定义CSS规则 #

在项目的frontend/styles/styles.css文件中添加以下样式（无此文件则新建）：

/* 抽屉折叠时，固定抽屉宽度为60px并保留过渡动画 */
vaadin-app-layout[drawer-opened=false] [slot="drawer"] {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  transition: width 0.2s ease;
}

/* 折叠状态下隐藏侧边菜单项的标签文本 */
vaadin-app-layout[drawer-opened=false] .compact-side-nav .vaadin-side-nav-item__label {
  display: none;
}

/* 折叠状态下让图标居中，占满菜单项宽度 */
vaadin-app-layout[drawer-opened=false] .compact-side-nav .vaadin-side-nav-item__prefix {
  width: 100%;
  justify-content: center;
}

3. 确保CSS正确引入 #

若默认配置未自动加载styles.css，可在主视图类上添加注解引入：

@CssImport("./styles/styles.css")
public class MainView extends AppLayout {
  // 视图逻辑代码
}

原理说明 #

Vaadin的AppLayout在抽屉折叠时会自动添加drawer-opened=false属性，我们以此为条件编写CSS规则：

• 覆盖默认折叠后的抽屉宽度，固定为60px
• 隐藏SideNavItem内置的标签元素.vaadin-side-nav-item__label
• 调整图标容器布局，确保图标在窄抽屉中居中显示

该方案完全兼容Vaadin原生的DrawerToggle切换逻辑，不会与内置机制冲突。

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