Falcon Navbar Top از تمام اجزای Boostrap Navbar پشتیبانی می کند. .navbar-brand, .navbar-nav, .navbar-toggler, .form-inline, .navbar-text, .collapse.navbar-collapse آن کامپوننت های فرعی در Navbar Top استفاده می شود.

<nav class="navbar navbar-light navbar-glass navbar-top navbar-expand-lg">

  <!-- Navbar Content-->
</nav>

Navbar Top می‌تواند از .navbar-toggler, .navbar-collapseو .navbar-expand{-sm|-md|-lg|-xl} کلاس‌ها برای تغییر زمانی که محتوای آنها پشت یک دکمه جمع می‌شود، استفاده کند. در ترکیب با ابزارهای دیگر، می توانید به راحتی انتخاب کنید که چه زمانی عناصر خاص را نشان دهید یا پنهان کنید.

برای نوارهای ناوبری که هرگز جمع نمی شوند، .navbar-expand کلاس را در نوار ناوبری اضافه کنید. برای نوارهای ناوبری که همیشه جمع می شوند، کلاسی اضافه نکنید .navbar-expand .

تغییر رنگ Navbar Top بسیار آسان است. Falcon .navbar-light برای یک ظاهر طراحی شده Navbar Top استفاده می کند. می‌توانید از کلاس‌های دیگر ابزار Bootstrap برای به‌روزرسانی نوار ناوبری استفاده کنید. درباره طرح های رنگی نوار ناوبری بوت استرپ بیشتر بدانید .

می توانید ویژگی darken on scroll را به نوار ناوبری Bootstrap اضافه کنید، فقط data-navbar-darken-on-scroll ویژگی را به .navbar عنصر اضافه کنید. به‌طور پیش‌فرض، bg-dark کد رنگی برای تیره کردن نوار ناوبری استفاده می‌شود.

<nav class="navbar navbar-expand-lg navbar-dark" data-navbar-darken-on-scroll="data-navbar-darken-on-scroll">

  <!-- Navbar content -->
</nav>

همچنین می‌توانید رنگ پس‌زمینه نوار ناوبری primaryرا secondaryبا استفاده از هر یک از رنگ‌های موجود در لیست تغییر دهید success: info_ warning_ danger_lightdarkblack11001000900800700600500400300200100white

<nav class="navbar navbar-expand-lg navbar-dark" data-navbar-darken-on-scroll="primary">

  <!-- Navbar content -->
</nav>