---
title: Dropdown 下拉菜单
description: 用于承载过多的操作集合，通过下拉拓展的形式，收纳更多的操作。
isComponent: true
usage: true
spline: navigation
author: swimly
---

## 基本用法

一个简单的下拉菜单由`l-dropdown`和`l-dropdown-item`组成，l-dropdown 提供了`default`和`dropdown`插槽，分别用来放置触发元
素和下拉备选项。

{{ base }}

## 多层下拉

通过上面的方式，只能创建简单的单层级的下拉菜单，如果向创建多层甚至更为复杂的下拉菜单，需要通过`l-dropdown`上
的`options`属性来定义。

> 提示：通过`content`定义下拉项的文本，通过`value`定义其选中值，通过`children`设置其下一层，按理来说支持无限层级。

{{ option }}

## 多层级展开方位

通过`direction`可设置多层级操作时，子层级展开方向，可选：`left`，`right`，默认为：`right`。

{{ direction }}

## 触发方式

通过`trigger`可设置下拉菜单的触发方式，可选：`hover`，`click`，`focus`， `context-menu`，默认为`click`。

{{ trigger }}

## 弹窗位置

通过`placement`可设置下拉菜单弹出的位置，具体参数请参考[`popup`](/web/components/popup#不同方位)。

> 提示：除非在固定位置需要固定下拉菜单的弹出位置，一般情况无需单独设置，会根据当前位置自动计算弹出的方位。

{{ placement }}

## 弹窗尺寸限制

通过`maxHeight`可设置下拉菜单的最大高度，超出时会出现滚动条，通过`minColumnWidth`设置弹窗最小宽度，通
过`maxColumnWidth`设置弹窗最大宽度。

> 除了上面用来限制弹窗的属性之外，还可以通过`popupProps`来传入所有`popup`的属性，用来限制弹窗的功能，具体请参
> 考[`popup`](/web/components/popup)

{{ maxHeight }}

## 点击关闭

通过 `hideAfterItemClick` 属性可以设置点击菜单项后是否自动隐藏弹窗

{{ popup }}

## 分割线

通过`options`数据中子项的`divider`属性来设置当前菜单项的分割线样式。

{{ line }}

## 禁用状态

通过 `disabled` 属性可以设置菜单项的禁用状态

{{ disabled }}
