let MenuDom: NavMenu
let setMenuActive = (key) => MenuDom.setMenuActive(key)
const changeMenu = (evt) => console.log('changeMenu', evt.detail)

		
<BeMenu class="be-menu-demo" active="1" mode="horizontal" bind:this={MenuDom} on:change={changeMenu}>
	<BeMenuItem id="1">处理中心</BeMenuItem>
	<BeSubMenu id="2">
		<div slot="title">我的工作台</div>
		<BeMenuItem id="2-1">选项1</BeMenuItem>
		<BeMenuItem id="2-2">选项2</BeMenuItem>
		<BeMenuItem id="2-3">选项3</BeMenuItem>
		<BeSubMenu id="2-4">
			<div slot="title">选项4</div>
			<BeMenuItem id="2-4-1">选项1</BeMenuItem>
			<BeMenuItem id="2-4-2">选项2</BeMenuItem>
			<BeMenuItem id="2-4-3">选项3</BeMenuItem>
		</BeSubMenu>
	</BeSubMenu>
	<BeMenuItem id="3" disabled>消息中心</BeMenuItem>
	<BeMenuItem id="4">订单管理</BeMenuItem>
</BeMenu>

	

		

		
<div style="width: 200px;min-height: 200px;">
	<BeMenu class="be-menu-demo" data={data1} active="2-1" mode="vertical" trigger="click">
		<BeMenuItem id="1">处理中心</BeMenuItem>
		<BeSubMenu id="2">
			<div slot="icon">
				<BeIcon name="app" />
			</div>
			<div slot="title">我的工作台</div>
			<BeMenuItem id="2-1">
				<div slot="icon">
					<BeIcon name="app" />
				</div>
				选项1
			</BeMenuItem>
			<BeMenuItem id="2-2">选项2</BeMenuItem>
			<BeMenuItem id="2-3">选项3</BeMenuItem>
			<BeSubMenu id="2-4">
				<div slot="title">选项4</div>
				<BeMenuItem id="2-4-1">选项1</BeMenuItem>
				<BeMenuItem id="2-4-2">选项2</BeMenuItem>
				<BeMenuItem id="2-4-3">选项3</BeMenuItem>
			</BeSubMenu>
		</BeSubMenu>
		<BeMenuItem id="3" disabled>消息中心</BeMenuItem>
		<BeMenuItem id="4">订单管理</BeMenuItem>
	</BeMenu>
</div>

	

		
let collapse = true;
const toggleCollapse = () => collapse = !collapse

		
<BeButton on:click={toggleCollapse}>切换 collapse</BeButton>
<div style="width: 200px;min-height: 200px;">
	<BeMenu class="be-menu-demo" data={data1} active="1" mode="vertical" trigger="hover" {collapse}>
		<BeMenuItem id="1">
			<div slot="icon">
				<BeIcon name="chart-bubble" />
			</div>
			处理中心
		</BeMenuItem>
		<BeSubMenu id="2">
			<div slot="icon">
				<BeIcon name="app" />
			</div>
			<div slot="title">我的工作台</div>
			<BeMenuItem id="2-1">
				<div slot="icon">
					<BeIcon name="app" />
				</div>
				选项1
			</BeMenuItem>
			<BeMenuItem id="2-2">选项2</BeMenuItem>
			<BeMenuItem id="2-3">选项3</BeMenuItem>
			<BeSubMenu id="2-4">
				<div slot="title">选项4</div>
				<BeMenuItem id="2-4-1">选项1</BeMenuItem>
				<BeMenuItem id="2-4-2">选项2</BeMenuItem>
				<BeMenuItem id="2-4-3">选项3</BeMenuItem>
			</BeSubMenu>
		</BeSubMenu>
		<BeMenuItem id="3" disabled>
			<div slot="icon">
				<BeIcon name="gift" />
			</div>
			消息中心
		</BeMenuItem>
		<BeMenuItem id="4">
			<div slot="icon">
				<BeIcon name="desktop" />
			</div>
			订单管理
		</BeMenuItem>
	</BeMenu>
</div>