ICEN UI
ICEN UI 下拉菜单
Docs ⌘K
Core · 稳定

下拉菜单

把相关操作收进一个安静的入口。支持图标、快捷键、选中项与完整键盘导航。

Preview
浮层 dropdown
html
<div class="dropdown" data-icen-dropdown>  <button class="icen-btn dropdown-trigger" data-icen-dropdown-trigger aria-haspopup="menu">文档操作</button>  <div data-icen-dropdown-menu hidden>    <div class="icen-menu-label">文件</div>    <button class="icen-menu-item icen-pressable" id="dd-rename">      <span class="icen-menu-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M11.5 4.5l4 4M4 12l9-9a1.4 1.4 0 0 1 2 0l2 2a1.4 1.4 0 0 1 0 2l-9 9-5 1Z"></path></svg></span>      <span class="icen-menu-item-label">重命名</span>      <span class="icen-menu-item-shortcut">F2</span>    </button>    <button class="icen-menu-item icen-pressable" id="dd-share">      <span class="icen-menu-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M8 6l2-2a4.2 4.2 0 0 1 6 6l-2 2M12 14l-2 2a4.2 4.2 0 0 1-6-6l2-2M7 13l6-6"></path></svg></span>      <span class="icen-menu-item-label">分享</span>    </button>    <button class="icen-menu-item" role="menuitemcheckbox" aria-checked="true" data-icen-menu-keep-open id="dd-updates">      <span class="icen-menu-item-label">接收更新</span>    </button>    <button class="icen-menu-item" disabled><span class="icen-menu-item-label">导出归档</span></button>    <div class="icen-menu-separator"></div>    <button class="icen-menu-item icen-pressable icen-menu-item--danger" id="dd-delete">      <span class="icen-menu-item-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M3.5 5.5h13M7 5.5V3h6v2.5M5 5.5l.7 11.5h8.6L15 5.5M8 9v5M12 9v5"></path></svg></span>      <span class="icen-menu-item-label">删除</span>      <span class="icen-menu-item-shortcut">⌫</span>    </button>  </div></div>

特性

接口

初始化
initDropdown()（kit 一行入口可直接命名导入）
导出
openDropdowncloseDropdown
类型
dist/behaviors/dropdown.d.mts（随 npm 包发布，含全部 JSDoc 约束）

安装

bun add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

js
import '@icen.ai/ui/kit/dropdown';

也可以用脚手架直接打印引入行：

bash
bunx --bun @icen.ai/ui add dropdown

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/menu.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

js
import { initDropdown, openDropdown, closeDropdown } from '@icen.ai/ui/kit/dropdown';const dispose = initDropdown(container); // 不传 container 则委托整个 documentopenDropdown(trigger);                  // 可选；ArrowUp 打开最后一项closeDropdown();                        // 关闭并归还焦点// Home/End、首字定位、Enter/Space 激活；Tab 回到正常表单顺序。// role=menuitemcheckbox + aria-checked 声明选中态，点击后由业务更新。// data-icen-menu-keep-open 支持连续修改；其他动作默认关闭。// 页面卸载时 dispose()，可再次 init。