Navbar

The Navbar is categorized into a single Navbar Primary Navbar and a double navbar Primary + Secondary Navbar based on page information requirements. It supports page anchors, dropdown menus, and external links.

content

Demo

Primary Navbar

The navbar will be fixed to the top when scrolling down. When scrolling up, the navbar will display the current page's sitename for better identification.

<div id="primary-nav" class="advan-nav primary-nav-wrapper" data-tracking-id="component-navbar-primary">
  <div class="site-name">
    <div class="row-maxwidth-98pct">
      <p>Site Name</p>
    </div>
  </div>
  <div class="nav-body row-maxwidth-98pct">
    <nav class="navbar navbar-expand-md">
      <div class="mb-primary-nav"> <i class="far fa-ellipsis-v fa-2x"></i> <span>Menu</span> </div>
      <div id="navbar" class="navbar-collapse">
        <ul class="navbar-nav">
          <li class="pre-btn"><a href="Javascript:void(0);"><i class="fas fa-angle-left"></i></a></li>
          <li class="nav-item"><a href="#menu01" class="nav-link">Menu 01</a></li>
          <li class="nav-item"><a href="#menu02" class="nav-link">Menu 02</a></li>
          <li class="nav-item"><a href="#menu03" class="nav-link">Menu 03</a></li>
          <li class="nav-item "><a href="#menu04" class="nav-link">Menu 04</a></li>
          <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link">Menu 05<i class="fas fa-angle-down"></i></a>
            <div class="dropdown-content">
              <ul>
                <li><a href="javascript:void(0)">Link 1</a></li>
                <li><a href="javascript:void(0)">Link 2</a></li>
                <li><a href="javascript:void(0)">Link 3</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item"><a href="javascript:void(0)" class="nav-link">Menu 06<i class="fas fa-angle-right" aria-hidden="true"></i></a></li>
          <li class="next-btn"><a href="Javascript:void(0);"><i class="fas fa-angle-right"></i></a></li>
        </ul>
        <div class="CTA-btn">
          <p><a href="javascript:void(0)" class="nav-link" target="_blank">Call to Action</a></p>
        </div>
      </div>
    </nav>
  </div>
  <!-- MB 置底選單 -->
  <div class="mobile-menubar-wrapper">
    <div class="mobile-menubar-inner">
      <ul>
        <li class="menu-item menubar-contact-us"> <span><i class="far fa-edit"></i></span> <span>Call to Action</span> </li>
      </ul>
    </div>
  </div>
</div>

Tabs with a more dropdown menu.


On mobile devices, the navigation bar will be displayed horizontally when fixed to the top, allowing users to swipe left or right to select the menu. Additionally, the original call-to-action button from the navbar will transform into a bottom navigation button for easier access on mobile screens.

Primary + Secondary Navbar

When dealing with content-heavy pages, this Navbar component setup can be applied. The usage rules are as follows:

  • Primary Navbar : Handles global navigation, such as switching between main pages.
  • Secondary Navbar : Manages section anchor points, allowing users to quickly navigate between different sections in the same page.

The Secondary Navbar cannot exist independently and must always be paired with the Primary Navbar for proper functionality and navigation hierarchy.

<div  id="primary-nav" class="advan-nav primary-nav-wrapper">
  <div class="nav-body row-maxwidth-98pct">
    <nav class="navbar navbar-expand-md close">
      <div class="mb-primary-nav"> <i class="far fa-ellipsis-v fa-2x"></i> <span>Menu</span> </div>
      <div id="navbar" class="navbar-collapse">
        <ul class="navbar-nav">
          <li class="pre-btn"><a href="Javascript:void(0);"><i class="fas fa-angle-left"></i></a></li>
          <li class="nav-item"><a href="Primary-Secondary-navbar.html" class="nav-link">Menu 01</a></li>
          <li class="nav-item"><a href="#menu02" class="nav-link">Menu 02</a></li>
          <li class="nav-item"><a href="#menu03" class="nav-link">Menu 03</a></li>
          <li class="nav-item "><a href="#menu04" class="nav-link">Menu 04</a></li>
          <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link">Menu 05<i class="fas fa-angle-down"></i></a>
            <div class="dropdown-content">
              <ul>
                <li><a href="javascript:void(0)">Link 1</a></li>
                <li><a href="javascript:void(0)">Link 2</a></li>
                <li><a href="javascript:void(0)">Link 3</a></li>
              </ul>
            </div>
          </li>
          <li class="nav-item"><a href="javascript:void(0)" class="nav-link">Menu 06<i class="fas fa-angle-right" aria-hidden="true"></i></a></li>
          <li class="next-btn"><a href="Javascript:void(0);"><i class="fas fa-angle-right"></i></a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>
<div id="secondary-nav" class="advan-nav secondary-nav-wrapper" data-tracking-id="component-navbar-primary-secondary">
  <div class="site-name">
    <div class="row-maxwidth-98pct">
      <p>Site Name</p>
    </div>
  </div>
  <div class="nav-body row-maxwidth-98pct">
    <nav class="navbar navbar-expand-md">
      <div class="navbar-collapse">
        <ul class="navbar-nav">
          <li class="pre-btn"><a href="Javascript:void(0);"><i class="fas fa-angle-left"></i></a></li>
          <li class="nav-item"><a href="#Anchor01" class="nav-link">Anchor 01</a></li>
          <li class="nav-item"><a href="#Anchor02" class="nav-link">Anchor 02</a></li>
          <li class="nav-item"><a href="#Anchor03" class="nav-link">Anchor 03</a></li>
          <li class="nav-item "><a href="#Anchor04" class="nav-link">Anchor 04</a></li>
          <li class="next-btn"><a href="Javascript:void(0);"><i class="fas fa-angle-right"></i></a></li>
        </ul>
        <div class="CTA-btn">
          <p><a href="https://advantech.wd3.myworkdayjobs.com/zh-TW/External" class="nav-link" target="_blank">Call to Action</a></p>
        </div>
      </div>
    </nav>
  </div>
  <!-- MB 置底選單 -->
  <div class="mobile-menubar-wrapper">
    <div class="mobile-menubar-inner">
      <ul>
        <li class="menu-item menubar-contact-us"> <span><i class="far fa-edit"></i></span> <span>Apply Now</span> </li>
      </ul>
    </div>
  </div>
</div>

When using the Primary + Secondary Navbar, the Secondary Navbar will remain fixed at the top when scrolling down, allowing users to quickly navigate to specific anchor points within the current page.

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/web/fonts/font-awesome/lastest/css/all.min.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/navbar.css">

JavaScript Instantiation

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

<script src="https://advcloudfiles.advantech.com/web/lib/jquery/jquery-3.6.0.min.js"></script>
<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/Navbar/activeNavbar.js"></script>

content