登录
显示侧边栏
组件
下拉菜单
隐藏侧边栏

下拉菜单

一个可组合的下拉菜单组件，既可以处理简单的导航菜单，也可以处理包含复选框、单选按钮和子菜单的复杂操作菜单。

名称
日期
热度
草稿
已发布
已归档 
<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.item icon="plus">New post</flux:menu.item>        <flux:menu.separator />        <flux:menu.submenu heading="Sort by">            <flux:menu.radio.group>                <flux:menu.radio checked>Name</flux:menu.radio>                <flux:menu.radio>Date</flux:menu.radio>                <flux:menu.radio>Popularity</flux:menu.radio>            </flux:menu.radio.group>        </flux:menu.submenu>        <flux:menu.submenu heading="Filter">            <flux:menu.checkbox checked>Draft</flux:menu.checkbox>            <flux:menu.checkbox checked>Published</flux:menu.checkbox>            <flux:menu.checkbox>Archived</flux:menu.checkbox>        </flux:menu.submenu>        <flux:menu.separator />        <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>    </flux:menu></flux:dropdown>

导航菜单

在下拉菜单中显示一组简单的链接。

使用 navmenu 组件来创建简单的链接集合。否则，使用 menu 组件来创建需要键盘导航、子菜单等功能的操作菜单。

<flux:dropdown position="bottom" align="end">    <flux:profile avatar="/img/demo/user.png" name="Olivia Martin" />    <flux:navmenu>        <flux:navmenu.item href="#" icon="user">Account</flux:navmenu.item>        <flux:navmenu.item href="#" icon="building-storefront">Profile</flux:navmenu.item>        <flux:navmenu.item href="#" icon="credit-card">Billing</flux:navmenu.item>        <flux:navmenu.item href="#" icon="arrow-right-start-on-rectangle">Logout</flux:navmenu.item>        <flux:navmenu.item href="#" icon="trash" variant="danger">Delete</flux:navmenu.item>    </flux:navmenu></flux:dropdown>

定位

通过 position 和 align 属性自定义下拉菜单的位置。您可以首先传递基础位置：top、bottom、left 和 right，然后使用对齐修饰符，如 start、center 或 end。

<flux:dropdown position="top" align="start"><!-- More positions... --><flux:dropdown position="right" align="center"><flux:dropdown position="bottom" align="center"><flux:dropdown position="left" align="end">

偏移量和间距

通过 offset 和 gap 属性自定义下拉菜单的偏移量/间距。这些属性接受像素值。

<flux:dropdown offset="-15" gap="2">

键盘提示

为菜单项添加键盘快捷键提示，帮助用户更快地导航您的应用程序。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.item icon="pencil-square" kbd="⌘S">Save</flux:menu.item>        <flux:menu.item icon="document-duplicate" kbd="⌘D">Duplicate</flux:menu.item>        <flux:menu.item icon="trash" variant="danger" kbd="⌘⌫">Delete</flux:menu.item>    </flux:menu></flux:dropdown>

复选框项目

选择一个或多个菜单选项。

读取
写入
删除 
<flux:dropdown>    <flux:button icon:trailing="chevron-down">Permissions</flux:button>    <flux:menu>        <flux:menu.checkbox wire:model="read" checked>Read</flux:menu.checkbox>        <flux:menu.checkbox wire:model="write" checked>Write</flux:menu.checkbox>        <flux:menu.checkbox wire:model="delete">Delete</flux:menu.checkbox>    </flux:menu></flux:dropdown>

单选按钮项目

选择单个菜单选项。

最新活动
创建日期
最受欢迎 
<flux:dropdown>    <flux:button icon:trailing="chevron-down">Sort by</flux:button>    <flux:menu>        <flux:menu.radio.group wire:model="sortBy">            <flux:menu.radio checked>Latest activity</flux:menu.radio>            <flux:menu.radio>Date created</flux:menu.radio>            <flux:menu.radio>Most popular</flux:menu.radio>        </flux:menu.radio.group>    </flux:menu></flux:dropdown>

分组

使用分隔线将相关的菜单项进行视觉分组。

 
<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.item>View</flux:menu.item>        <flux:menu.item>Transfer</flux:menu.item>        <flux:menu.separator />        <flux:menu.item>Publish</flux:menu.item>        <flux:menu.item>Share</flux:menu.item>        <flux:menu.separator />        <flux:menu.item variant="danger">Delete</flux:menu.item>    </flux:menu></flux:dropdown>

带标题的分组

在标题下对选项进行分组，使其更容易发现。

账户
账单
 
<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.group heading="Account">            <flux:menu.item>Profile</flux:menu.item>            <flux:menu.item>Permissions</flux:menu.item>        </flux:menu.group>        <flux:menu.group heading="Billing">            <flux:menu.item>Transactions</flux:menu.item>            <flux:menu.item>Payouts</flux:menu.item>            <flux:menu.item>Refunds</flux:menu.item>        </flux:menu.group>        <flux:menu.item>Logout</flux:menu.item>    </flux:menu></flux:dropdown>

子菜单

嵌套子菜单以创建更紧凑的菜单。

名称
日期
热度
草稿
已发布
已归档 
<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.submenu heading="Sort by">            <flux:menu.radio checked>Name</flux:menu.radio>            <flux:menu.radio>Date</flux:menu.radio>            <flux:menu.radio>Popularity</flux:menu.radio>        </flux:menu.submenu>        <flux:menu.submenu heading="Filter">            <flux:menu.checkbox checked>Draft</flux:menu.checkbox>            <flux:menu.checkbox checked>Published</flux:menu.checkbox>            <flux:menu.checkbox>Archived</flux:menu.checkbox>        </flux:menu.submenu>        <flux:menu.separator />        <flux:menu.item variant="danger">Delete</flux:menu.item>    </flux:menu></flux:dropdown>

保持打开

菜单通常在点击项目时关闭，但是，您可以向 menu 组件添加 keep-open 属性来保持其打开状态。

草稿
已发布
已归档 
<flux:dropdown>    <flux:button icon:trailing="chevron-down">Filter</flux:button>    <flux:menu keep-open>        <flux:menu.checkbox checked>Draft</flux:menu.checkbox>        <flux:menu.checkbox checked>Published</flux:menu.checkbox>        <flux:menu.checkbox>Archived</flux:menu.checkbox>    </flux:menu></flux:dropdown>
如果您希望菜单仅在点击特定项目时保持打开，您可以将 keep-open 属性添加到项目本身。这适用于：
  • menu.item
  • menu.checkbox
  • menu.radio
  • menu.radio.group
  • menu.submenu
草稿
已发布
已归档 
<flux:dropdown>    <flux:button icon:trailing="chevron-down">Filters</flux:button>    <flux:menu >        <flux:menu.checkbox keep-open checked>Draft</flux:menu.checkbox>        <flux:menu.checkbox keep-open checked>Published</flux:menu.checkbox>        <flux:menu.checkbox keep-open>Archived</flux:menu.checkbox>        <flux:menu.separator />        <flux:menu.item variant="danger">Clear</flux:menu.item>    </flux:menu></flux:dropdown>

相关组件

导航栏

构建带有下拉菜单的响应式导航栏
个人资料

显示用户头像和个人资料信息
按钮

用于表单和UI操作的交互式控件

参考文档

flux:dropdown

属性
描述
position
下拉菜单的位置。选项：top、right、bottom（默认）、left。
align
下拉菜单的对齐方式。选项：start、center、end。默认值：start。
offset
距离触发元素的偏移量（像素）。默认值：0。
gap
触发器和菜单之间的间距（像素）。默认值：4。
属性
描述
data-flux-dropdown
应用于根元素，用于样式设置和标识。

flux:menu

一个复杂的菜单组件，支持键盘导航、子菜单、复选框和单选按钮。

属性
描述
keep-open
防止菜单在点击其内部任何项目时关闭。
插槽
描述
default
菜单项、分隔符和子菜单。
属性
描述
data-flux-menu
应用于根元素，用于样式设置和标识。

flux:menu.item

属性
描述
icon
在项目开始处显示的图标名称。
icon:trailing
在项目末尾显示的图标名称。
icon:variant
图标的变体。选项：outline、solid、mini、micro。
kbd
在项目末尾显示的键盘快捷键提示。
suffix
在项目末尾显示的文本。
variant
项目的视觉样式。选项：default、danger。
disabled
如果为 true，则阻止与菜单项的交互。
keep-open
防止菜单在选择此项目时关闭。
属性
描述
data-flux-menu-item
应用于根元素，用于样式设置和标识。
data-active
当项目被悬停/激活时应用。

flux:menu.submenu

属性
描述
heading
作为子菜单标题显示的文本。
icon
在子菜单开始处显示的图标名称。
icon:trailing
在子菜单末尾显示的图标名称。
icon:variant
图标的变体。选项：outline、solid、mini、micro。
keep-open
防止子菜单在选择其内部任何项目时关闭。
插槽
描述
default
子菜单项（复选框、单选按钮等）。

flux:menu.separator

分隔菜单项的水平线。

flux:menu.checkbox-group

属性
描述
wire:model
将复选框组绑定到Livewire属性。查看 wire:model 文档 了解更多信息。
插槽
描述
default
复选框。

flux:menu.checkbox

属性
描述
wire:model
将复选框绑定到Livewire属性。查看 wire:model 文档 了解更多信息。
checked
如果为 true，复选框默认选中。
disabled
如果为 true，阻止与复选框的交互。
keep-open
防止菜单在选择此复选框时关闭。
属性
描述
data-active
当复选框被悬停/激活时应用。
data-checked
当复选框被选中时应用。

flux:menu.radio.group

属性
描述
wire:model
将单选按钮组绑定到Livewire属性。查看 wire:model 文档 了解更多信息。
keep-open
防止菜单在选择此组中任何单选按钮时关闭。
插槽
描述
default
单选按钮。

flux:menu.radio

属性
描述
checked
如果为 true，单选按钮默认选中。
disabled
如果为 true，阻止与单选按钮的交互。
keep-open
防止菜单在选择此单选按钮时关闭。
属性
描述
data-active
当单选按钮被悬停/激活时应用。
data-checked
当单选按钮被选中时应用。
© 2025 FluxProMax™. All Rights Reserved.

备案号：皖ICP备13019729号-11