---
title: Menu 导航菜单
description: 用于系统页面的菜单导航，常配合layout进行系统页面的整体布局。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: swimly
---

## 基本用法

菜单组件按排列分为：头部导航（`l-head-menu`）和侧边导航（`l-menu`），通过`defaultValue`和`value`可设置当前激活的菜单项。

{{ base }}

## 不同主题

通过`theme`可设置菜单的主题颜色，可选：`light`，`dark`，默认为：`light`。

{{ theme }}

## 多级导航

除了上面的简单的导航之外，还可通过`l-sub-menu`来定义多级导航，另外，还可通过`expandType`来定义多级导航的展开方式，可选
：`expand`，`popup`，默认为：`expand`。

{{ mutiple }}

## 分组导航

为了更直观的展示各菜单项之间的关系，还可通过`l-menu-group`来进行分类。

> 注意：分组导航只适用垂直导航，`l-head-menu`不支持此形式，使用分组导航之后便不再支持多层级导航，请根据需求合理使用。

{{ group }}

## 互斥展开

类似手风琴效果，每次只能展开一个菜单栏，只适用于垂直导航，并且`expandType`为`normal`的情况，通过`expandMutex`来进行设置
。

{{ expandMutex }}

## 宽度设置

仅对纵向导航有效，通过`width`属性定义，当值为`number`时代表展开时的宽度，当值为`array`时，代表`[展开, 收起]`。

{{ width }}

## 复杂布局

除了简单的菜单功能之外，还提供了`logo`和`operations`插槽，用来放置网站的 logo 和功能操作按钮、图标等等。

{{ layout }}

## 收起状态

通过`collapsed`可设置侧边菜单的收起状态，只显示菜单栏的图标。

{{ collapsed }}
