如何移除PrimeNG Menubar屏幕缩小时生成的汉堡子菜单？

针对你用Angular 14 + PrimeNG遇到的Menubar缩小时自动生成汉堡子菜单的问题，给你两个直接解决的办法：

方法1：通过组件属性禁用响应式折叠 #

PrimeNG的Menubar自带breakpoint属性，用来设定触发折叠的屏幕宽度阈值。把这个值设成一个极大的数（比如9999px），就能让它在任何常规屏幕下都不会触发折叠：

修改你的menubar.component.html代码：

<p-menubar [model]="items" [breakpoint]="9999">
    <ng-template pTemplate="end">
        <button type="button" pButton label="CERRAR SESION" icon="pi pi-sign-out" (click)="logout()"></button>
    </ng-template>
</p-menubar>

默认breakpoint是960px，屏幕窄于这个值就会折叠。设成9999px后，几乎所有设备都达不到这个宽度，自然不会生成汉堡菜单。

方法2：用CSS强制隐藏折叠元素 #

如果第一种方法没效果，直接用CSS把折叠相关的元素藏起来就行：

在menubar.component.css里加这段样式：

/* 隐藏响应式汉堡按钮 */
.p-menubar-button {
    display: none !important;
}

/* 隐藏折叠后的下拉菜单容器 */
.p-menubar-root-list.p-menubar-mobile {
    display: none !important;
}

不管屏幕多大，都会把自动生成的汉堡按钮和折叠菜单彻底隐藏。

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