In luxize, there are 3 supported navigation bars that can be located in the masthead.

1. Masthead Navbar

Masthead navbar is actually a modified Bootstrap Navbar Component where we put all menu and feature links to our website.

Basic navbar HTML code are look like this

<navbar class="masthead-navbar navbar navbar-expand if-is-sticky--inverse if-navbar-hover--inverse if-navbar-hover--bg-opacity-1">
  <div class="bg navbar-bg position-absolute"></div>
  <div class="container-xl">
    
    <!-- Brand / Logo -->
    <a href="/url/target" class="navbar-brand position-relative me-3 me-lg-5">
      
      <!-- use 2 same logo but with different color to support if-is-sticky--inverse if-navbar-hover--inverse -->
      <img src="/path/to/image" class="navbar-dark-logo" alt="">
      <img src="/path/to/image" class="navbar-light-logo" alt="">
    
    </a>

    <ul class="masthead-navbar-nav navbar-nav nav-underline me-auto">
      
      <!-- Nav Item -->
      <li class="nav-item"><a href="/url/target" class="nav-link">One</a></li>
      <li class="nav-item"><a href="/url/target" class="nav-link">Two</a></li>
      <li class="nav-item"><a href="/url/target" class="nav-link">Three</a></li>
      
      <!-- Nav Item Dropdown -->
      <li class="nav-item dropdown">
        <a class="nav-link text-uppercase" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Menu</a>
        <div class="dropdown-menu">
          <a href="/url/target" class="dropdown-item">Dropdown Item 1</a>
          <a href="/url/target" class="dropdown-item">Dropdown Item 2</a>
          <a href="/url/target" class="dropdown-item">Dropdown Item 3</a>
        </div>
      </li>
      
      <!-- Nav Item Dropdown but wider. This happens by adding width utility class (cw-6) -->
      <li class="nav-item dropdown">
        <a class="nav-link text-uppercase" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Menu</a>
        <div class="dropdown-menu cw-6">
          

          <!-- with wider dropdown, you have rooms for grouped dropdown item. Example: -->
          <div class="row g-1">
            <div class="col-auto w-25">
              <h6 class="dropdown-header text-uppercase">Dropdown Item Group</h6>
            </div>
            
            <div class="col">
              <span class="d-inline-block">
                <a href="/url/target">Dropdown Group Item 1</a>,
                <a href="/url/target">Dropdown Group Item 2</a>,
                <a href="/url/target">Dropdown Group Item 3</a>
              </span>
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->

        </div>
      </li>

      
      <!-- Full Window Nav Item Dropdown by adding dropdown--xl class -->
      <li class="nav-item dropdown dropdown--xl ">
        <a class="nav-link text-uppercase" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Menu</a>
        <div class="dropdown-menu">

          <div class="container-xl">
            <!-- With its fullwindow width, you can put almost anything in this dropdown menu, 
              from grid, swiper, tabs or combine them? swiper and tabs? 
              check out the demu for more samples
              -->
          </div>

        </div>
      </li>

    </ul>
    
    <ul class="masthead-navbar-nav navbar-nav nav-underline if-offcanvas-show--show">
      <li class="nav-item"><a href="/url/target" class="nav-link">One</a></li>
      <li class="nav-item"><a href="/url/target" class="nav-link">Two</a></li>
      <li class="nav-item"><a href="/url/target" class="nav-link">Three</a></li>
    </ul>

  </div>
</navbar>

For more about navbar you can check it on bootstrap docs getbootstrap.com/docs/5.3/components/navbar/

2. Masthead Navbar Top

Same like Masthead Navbar, but we styled this menu as compact menu. See luxize/leather-shop/ usecase for more detail

<nav class="masthead-navbartop navbar navbar-expand navbar-dark">

  <div class="bg navbar-bg position-absolute bg-emphasis bg-opacity-50"></div>
  
  <div class="container-xl py-1">

    <ul class="masthead-navbar-nav navbar-nav nav-underline if-offcanvas-show--show">
      <li class="nav-item"><a href="/url/target" class="nav-link">One</a></li>
      <li class="nav-item"><a href="/url/target" class="nav-link">Two</a></li>
      <li class="nav-item"><a href="/url/target" class="nav-link">Three</a></li>
    </ul>
  
  </div>

</nav>
</navbar>

3. Offcanvas

Offset is optional menu that appears when user click the button toggler.

<div class="offcanvas offcanvas-end masthead-offcanvas vw-100 masthead-offcanvas border-none shadow-none" tabindex="-1" id="offcanvasNavbar" data-bs-scroll="true">
  
  <div class="offcanvas-body px-0 overflow-x-hidden">
    
    <div class="container-xl h-100 d-flex align-items-center">
      
      <!-- You can put almost everything here. 
        check https://html.coolorize.com/luxize/property-listing that use offset for small screen menu -->
            
    </div>
    <!-- /.container-xl -->
      
  </div>
  <!-- /.offcanvas-body -->
  
</div>
<!-- /.offcanvas -->

For more about off canvas you can check it on bootstrap docs getbootstrap.com/docs/5.3/components/offcanvas/