<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>|
属性
|
描述
|
|---|---|
| href |
项目链接到的URL。
|
| current |
如果为 true，则对项目应用活动样式。如果未指定，则根据当前URL自动检测。
|
| icon |
在项目开始处显示的图标名称。
|
| icon:trailing |
在项目末尾处显示的图标名称。
|
| badge |
作为徽章显示的内容。可以是字符串、布尔值或插槽。
|
| badge:color |
徽章的颜色。选项：与徽章组件上的 color 属性相同的颜色选项。
|
| badge:variant |
徽章的变体。选项：solid、outline。默认：solid。
|
|
属性
|
描述
|
|---|---|
| data-current |
当项目处于活动/当前状态时应用。
|
|
属性
|
描述
|
|---|---|
| href |
项目链接到的URL。
|
| current |
如果为 true，则对项目应用活动样式。如果未指定，则根据当前URL自动检测。
|
| icon |
在项目开始处显示的图标名称。
|
| badge |
作为徽章显示的内容。可以是字符串、布尔值或插槽。
|
| badge:color |
徽章的颜色。选项：与徽章组件上的 color 属性相同的颜色选项。
|
| badge:variant |
徽章的变体。选项：solid、outline。默认：solid。
|
|
属性
|
描述
|
|---|---|
| data-current |
当项目处于活动/当前状态时应用。
|
|
属性
|
描述
|
|---|---|
| heading |
显示为分组标题的文本。
|
| expandable |
如果为 true，则使分组可折叠。
|
| expanded |
如果为 true，则在可折叠时默认展开分组。
|
|
插槽
|
描述
|
|---|---|
| default |
分组的导航项目。
|