Flux components
Navlist
Vertical navigation for a sidebar or a page rail.
<flux:navlist class="w-64">
<flux:navlist.item href="#" icon="home" current>Dashboard</flux:navlist.item>
<flux:navlist.item href="#" icon="shopping-bag" badge="3">My orders</flux:navlist.item>
<flux:navlist.item href="#" icon="heart">Favorites</flux:navlist.item>
<flux:navlist.item href="#" icon="cog-6-tooth">Settings</flux:navlist.item>
</flux:navlist>Groups
A group can be a plain heading, or expandable.
<flux:navlist class="w-64">
<flux:navlist.group heading="Shop">
<flux:navlist.item href="#" current>Phones & tablets</flux:navlist.item>
<flux:navlist.item href="#">Home appliances</flux:navlist.item>
</flux:navlist.group>
<flux:navlist.group heading="Wallet" expandable>
<flux:navlist.item href="#">Balance</flux:navlist.item>
<flux:navlist.item href="#">Gift cards</flux:navlist.item>
</flux:navlist.group>
</flux:navlist>On this page
A navlist also works as a table of contents in an aside column.
<flux:navlist class="w-56">
<flux:navlist.item href="#" icon="chart-bar">Today\'s stats</flux:navlist.item>
<flux:navlist.item href="#" icon="table-cells">Latest orders</flux:navlist.item>
<flux:navlist.item href="#" icon="fire">Flash deals</flux:navlist.item>
</flux:navlist>