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()