Nav.js

Creates the template navigation from a list. Also makes logo, icon buttons and user menu work. Receives an options object and a dom element. Initialized by scripts.js. To change nav settings such as color and direction, please see Theme Settings .

Javascript

var nav = new Nav(document.getElementById('nav'), {
  matchUrl: true, 
  disablePinning: false,
  verticalUnpinned: Globals.xxl.replace('px', ''),
  verticalMobile: Globals.lg.replace('px', ''),
  horizontalMobile: Globals.lg.replace('px', ''),
});

Html

<div id="nav" class="nav-container d-flex">
  <div class="nav-content d-flex">
    <!-- Logo Start -->
    <div class="logo position-relative">
      <a href="Dashboard.html">
        <div class="img"></div>
      </a>
    </div>
    <!-- Logo End -->

    <!-- User Menu Start -->
    <div class="user-container d-flex">
      <a href="#" class="d-flex user position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <img class="profile" alt="profile" src="img/profile/profile-8.webp" />
        <div class="name">Zayn Hartley</div>
      </a>
      <div class="dropdown-menu dropdown-menu-end user-menu wide">
        <!-- User Menu Content -->
      </div>
    </div>
    <!-- User Menu End -->

    <!-- Icons Menu Start -->
    <ul class="list-unstyled list-inline text-center menu-icons">
      <li class="list-inline-item">
        <a href="#" data-bs-toggle="modal" data-bs-target="#searchPagesModal">
          <i data-acorn-icon="search" data-acorn-size="18"></i>
        </a>
      </li>
      <li class="list-inline-item">
        <a href="#" id="pinButton" class="pin-button">
          <i data-acorn-icon="lock-on" class="unpin" data-acorn-size="18"></i>
          <i data-acorn-icon="lock-off" class="pin" data-acorn-size="18"></i>
        </a>
      </li>
      <li class="list-inline-item">
        <a href="#" id="colorButton">
          <i data-acorn-icon="light-on" class="light" data-acorn-size="18"></i>
          <i data-acorn-icon="light-off" class="dark" data-acorn-size="18"></i>
        </a>
      </li>
      <li class="list-inline-item">
        <a href="#" data-bs-toggle="dropdown" data-bs-target="#notifications" aria-haspopup="true" aria-expanded="false" class="notification-button">
          <div class="position-relative d-inline-flex">
            <i data-acorn-icon="bell" data-acorn-size="18"></i>
            <span class="position-absolute notification-dot rounded-xl"></span>
          </div>
        </a>
        <div class="dropdown-menu dropdown-menu-end wide notification-dropdown scroll-out" id="notifications">
          <div class="scroll">
            <!-- Notification Content -->
          </div>
        </div>
      </li>
    </ul>
    <!-- Icons Menu End -->

    <!-- Menu Start -->
    <div class="menu-container flex-grow-1">
      <ul id="menu" class="menu">
        <li>
          <a href="Dashboard.html">
            <i data-acorn-icon="shop" class="icon" data-acorn-size="18"></i>
            <span class="label">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#products" data-href="Products.html">
            <i data-acorn-icon="cupcake" class="icon" data-acorn-size="18"></i>
            <span class="label">Products</span>
          </a>
          <ul id="products">
            <li>
              <a href="Products.List.html">
                <span class="label">List</span>
              </a>
            </li>
            <li>
              <a href="Products.Detail.html">
                <span class="label">Detail</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- Menu End -->

    <!-- Mobile Buttons Start -->
    <div class="mobile-buttons-container">
      <!-- Menu Button Start -->
      <a href="#" id="mobileMenuButton" class="menu-button">
        <i data-acorn-icon="menu"></i>
      </a>
      <!-- Menu Button End -->
    </div>
    <!-- Mobile Buttons End -->
  </div>
  <div class="nav-shadow"></div>
</div>