FluxUI 中文网 · 导航栏组件

显示侧边栏

垂直或水平排列导航链接。

想了解更多关于导航栏的信息请访问：布局文档 ->

<flux:navbar>    <flux:navbar.item href="#">Home</flux:navbar.item>    <flux:navbar.item href="#">Features</flux:navbar.item>    <flux:navbar.item href="#">Pricing</flux:navbar.item>    <flux:navbar.item href="#">About</flux:navbar.item></flux:navbar>

检测当前页面

导航栏和导航列表会尝试根据传入的 href 属性自动检测并标记当前页面。但是，如果您需要完全控制，可以直接向项目传递 current 属性。

<flux:navbar.item href="/" current>Home</flux:navbar.item><flux:navbar.item href="/" :current="false">Home</flux:navbar.item><flux:navbar.item href="/" :current="request()->is('/')">Home</flux:navbar.item>

带图标

添加前导图标以提供视觉上下文。

<flux:navbar>    <flux:navbar.item href="#" icon="home">Home</flux:navbar.item>    <flux:navbar.item href="#" icon="puzzle-piece">Features</flux:navbar.item>    <flux:navbar.item href="#" icon="currency-dollar">Pricing</flux:navbar.item>    <flux:navbar.item href="#" icon="user">About</flux:navbar.item></flux:navbar>

带徽章

使用 badge 属性为导航栏项目添加尾随徽章。

<flux:navbar>    <flux:navbar.item href="#">Home</flux:navbar.item>    <flux:navbar.item href="#" badge="12">Inbox</flux:navbar.item>    <flux:navbar.item href="#">Contacts</flux:navbar.item>    <flux:navbar.item href="#" badge="Pro" badge:color="lime">Calendar</flux:navbar.item></flux:navbar>

将多个导航项目合并到一个下拉菜单中，以节省空间并对相关项目进行分组。

<flux:navbar>    <flux:navbar.item href="#">Dashboard</flux:navbar.item>    <flux:navbar.item href="#">Transactions</flux:navbar.item>    <flux:dropdown>        <flux:navbar.item icon:trailing="chevron-down">Account</flux:navbar.item>        <flux:navmenu>            <flux:navmenu.item href="#">Profile</flux:navmenu.item>            <flux:navmenu.item href="#">Settings</flux:navmenu.item>            <flux:navmenu.item href="#">Billing</flux:navmenu.item>        </flux:navmenu>    </flux:dropdown></flux:navbar>

导航列表（侧边栏）

使用 navlist 组件垂直排列导航栏。

<flux:navlist class="w-64">    <flux:navlist.item href="#" icon="home">Home</flux:navlist.item>    <flux:navlist.item href="#" icon="puzzle-piece">Features</flux:navlist.item>    <flux:navlist.item href="#" icon="currency-dollar">Pricing</flux:navlist.item>    <flux:navlist.item href="#" icon="user">About</flux:navlist.item></flux:navlist>

导航列表分组

对相关导航项目进行分组。

<flux:navlist>    <flux:navlist.group heading="Account" class="mt-4">        <flux:navlist.item href="#">Profile</flux:navlist.item>        <flux:navlist.item href="#">Settings</flux:navlist.item>        <flux:navlist.item href="#">Billing</flux:navlist.item>    </flux:navlist.group></flux:navlist>

可折叠分组

使用 expandable 属性将相关导航项目分组到可折叠的部分中。

<flux:navlist class="w-64">    <flux:navlist.item href="#" icon="home">Dashboard</flux:navlist.item>    <flux:navlist.item href="#" icon="list-bullet">Transactions</flux:navlist.item>    <flux:navlist.group heading="Account" expandable>        <flux:navlist.item href="#">Profile</flux:navlist.item>        <flux:navlist.item href="#">Settings</flux:navlist.item>        <flux:navlist.item href="#">Billing</flux:navlist.item>    </flux:navlist.group></flux:navlist>

如果您希望分组默认折叠，可以使用 expanded 属性：

<flux:navlist.group heading="Account" expandable :expanded="false">

导航列表徽章

使用 badge 属性显示与导航列表项目相关的附加信息。

<flux:navlist class="w-64">    <flux:navlist.item href="#" icon="home">Home</flux:navlist.item>    <flux:navlist.item href="#" icon="envelope" badge="12">Inbox</flux:navlist.item>    <flux:navlist.item href="#" icon="user-group">Contacts</flux:navlist.item>    <flux:navlist.item href="#" icon="calendar-days" badge="Pro" badge:color="lime">Calendar</flux:navlist.item></flux:navlist>

选项卡

将内容组织到单独的面板中

页头

应用程序的顶部导航页头

侧边栏

主要或次要导航侧边栏

参考

水平导航容器。

插槽	描述
default	导航项目。

属性	描述
data-flux-navbar	应用于根元素，用于样式和识别。

属性	描述
href	项目链接到的URL。
current	如果为 true，则对项目应用活动样式。如果未指定，则根据当前URL自动检测。
icon	在项目开始处显示的图标名称。
icon:trailing	在项目末尾处显示的图标名称。
badge	作为徽章显示的内容。可以是字符串、布尔值或插槽。
badge:color	徽章的颜色。选项：与徽章组件上的 color 属性相同的颜色选项。
badge:variant	徽章的变体。选项：solid、outline。默认：solid。

属性	描述
data-current	当项目处于活动/当前状态时应用。

flux:navlist

垂直导航容器（侧边栏）。

插槽	描述
default	导航项目和分组。

属性	描述
data-flux-navlist	应用于根元素，用于样式和识别。

flux:navlist.item

属性	描述
href	项目链接到的URL。
current	如果为 true，则对项目应用活动样式。如果未指定，则根据当前URL自动检测。
icon	在项目开始处显示的图标名称。
badge	作为徽章显示的内容。可以是字符串、布尔值或插槽。
badge:color	徽章的颜色。选项：与徽章组件上的 color 属性相同的颜色选项。
badge:variant	徽章的变体。选项：solid、outline。默认：solid。

属性	描述
data-current	当项目处于活动/当前状态时应用。

flux:navlist.group

属性	描述
heading	显示为分组标题的文本。
expandable	如果为 true，则使分组可折叠。
expanded	如果为 true，则在可折叠时默认展开分组。

插槽	描述
default	分组的导航项目。

导航栏

相关组件

参考