navbar
default theme
<nav class="navbar">
<div class="brand">
<img src="/icon.svg" alt="fruitui logo" />
<span>brand</span>
</div>
<div class="toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar-links">
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</nav>
other thmes
All themes are available but not showcased due to the large navbar size, which could result in an excessive number of iframes.
<nav class="navbar <THEME-NAME>">
<!-- ... -->
</nav>
usage
section import
@use "~"as * with (
$base-components: true
);
Individual Import
@use "~"as * with (
$components: (
base: (
navbar: ture,
),
)
);
mixin
@use "~"as * with (
$a-var: "..."
);
@include navbarBase();
javascript
import { Navbar } form "spices-fruitui"
Navbar()