Flux components
Navbar
Horizontal navigation, usually inside a header.
<flux:navbar>
<flux:navbar.item href="#" current>Home</flux:navbar.item>
<flux:navbar.item href="#">Flash deals</flux:navbar.item>
<flux:navbar.item href="#">Categories</flux:navbar.item>
<flux:navbar.item href="#">Support</flux:navbar.item>
</flux:navbar>Icons and badges
<flux:navbar>
<flux:navbar.item href="#" icon="home" current>Home</flux:navbar.item>
<flux:navbar.item href="#" icon="fire">Flash deals</flux:navbar.item>
<flux:navbar.item href="#" icon="shopping-bag" badge="3">Orders</flux:navbar.item>
<flux:navbar.item href="#" icon="chat-bubble-left-right" badge="New" badge-color="lime">Support</flux:navbar.item>
</flux:navbar>Scrollable
On narrow screens a long navbar scrolls instead of wrapping.
<flux:navbar scrollable class="max-w-sm">
<flux:navbar.item href="#" current>Phones</flux:navbar.item>
<flux:navbar.item href="#">Laptops</flux:navbar.item>
<flux:navbar.item href="#">Cameras</flux:navbar.item>
<flux:navbar.item href="#">Appliances</flux:navbar.item>
<flux:navbar.item href="#">Books</flux:navbar.item>
</flux:navbar>In RTL
The navbar is laid out with logical properties, so the same markup reads right-to-left with no direction-specific classes.
<div dir="rtl">
<flux:navbar>
<flux:navbar.item href="#" icon="home" current>خانه</flux:navbar.item>
<flux:navbar.item href="#" icon="fire">پیشنهاد شگفتانگیز</flux:navbar.item>
<flux:navbar.item href="#" icon="shopping-bag" badge="۳">سفارشها</flux:navbar.item>
</flux:navbar>
</div>