با استفاده از Falcon's Navbar Vertical و Navbar Top به راحتی هر صفحه را به طرح بندی نوار ناوبر ترکیبی تبدیل کنید. ساختار طرح ناوبری ترکیبی به این صورت خواهد بود:

<main class="main">
  <div class="container" data-layout="container">

    <!-- Set data-navbar-top="combo" attribute to the navbar top element as describe in step 1 in the responsive behaviours section-->
    <nav class="navbar navbar-vertical navbar-expand-xl navbar-light">
      <div class="collapse navbar-collapse">
        <div class="navbar-vertical-content scrollbar">

          <!-- Your navbar vertical content-->

          <!-- Set a unique ID to the navbar vertical element as describe in step 2 in the responsive behaviours section  -->
          <div class="navbar-nav" id="yourUniqueID">

            <!-- Nav elements-->
          </div>
        </div>
      </div>
    </nav>
    <div class="content">

      <!-- Set the unique ID to data-move-target attribute which you added in step 2 as describe in step 3 in the responsive behaviours section -->
      <nav class="navbar navbar-expand-lg navbar-light navbar-glass navbar-top" data-move-target="#yourUniqueID" data-navbar-top="combo">

        <!-- Your navbar top content here-->
      </nav>

      <!-- Your page content wil go here-->
    </div>
  </div>
</main>

Falcon نقطه شکست را از navbar-expand{-sm|-md|-lg|-xl|-xxl} کلاس نوار ناوبری بالا دریافت می کند و اگر اندازه صفحه کمتر از نقطه شکست باشد، محتوا را به نوار ناوبری عمودی منتقل می کند.

برای ریسپانسیو کردن نوار ناوبر ترکیبی مراحل زیر را دنبال کنید:

1. data-navbar-top="combo" ویژگی را به .navbar-top عنصر اضافه کنید.
2. پس از جایی که می‌خواهید محتوای بالای نوار ناوبری خود را در حالت واکنش‌گرا قرار دهید، یک شناسه منحصربه‌فرد به هر عنصر عمودی نوار ناوبری اضافه کنید.
3. data-move-target ویژگی را با شناسه (تنظیم در مرحله 2) به عنصر اضافه data-navbar-top="combo" کنید تا محتوای جمع‌شده نوار ناوبری به نوار ناوبری عمودی منتقل شود.