# 如何对bindMenu菜单进行自定义样式

#### 问题现象

如何自定义bindMenu菜单的背景颜色并显示箭头？

#### 背景知识

bindMenu为组件绑定弹出式菜单，菜单项以垂直列表形式显示，支持长按、点击或鼠标右键触发。

#### 解决方案

bindMenu方法入参数中MenuOptions继承ContextMenuOptions。可通过属性backgroundColor和backgroundBlurStyle组合设置菜单背景颜色，ContextMenuOptions中的enableArrow属性设置是否显示箭头。

代码示例如下：

```
@Entry
@Component
struct MenuIndex {
  @Builder
  MenuBuilder() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Column() {
        Column() {
          Row() {
            Image($r('sys.media.ohos_ic_public_camera'))
              .width(20)
              .height(20)
              .margin({ right: 4 });
            Text('相机')
              .fontSize(14)
              .fontColor('#44474B');
          }
          .height(28)
          .padding({ left: 8, right: 8 })
          .onClick(() => {
          });

          Row() {
            Image($r('sys.media.ohos_ic_public_albums'))
              .width(20)
              .height(20)
              .margin({ right: 4 });
            Text('相册')
              .fontSize(14)
              .fontColor('#44474B');
          }
          .height(28)
          .padding({ left: 8, right: 8 })
          .onClick(() => {
          });
        };
      }
      .width('30%');
    };
  }

  build() {
    Column() {
      Text('click for menu')
        .fontSize(20)
        .margin({ top: 20 })
        .bindMenu(this.MenuBuilder, {
          enableArrow: true, // 是否显示箭头
          placement: Placement.Bottom, // 菜单组件优先显示的位置，当前位置显示不下时，会自动调整位置
          backgroundColor: '#F1F3F5', // 菜单背板颜色
          backgroundBlurStyle: BlurStyle.NONE, // 菜单背板模糊材质
          borderRadius: 10  // 菜单边框圆角半径
        });
    }
    .height('100%')
    .width('100%')
    .padding({ top: 200 })
    .backgroundColor('#f0f0f0');
  }
}
```