Falcon used the Bootstrap's .navbar-expand{-sm|-md|-lg|-xl|-xxl} classes in .navbar-vertical element to decide when the navbar vertical will expand or not.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light">

  <!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">

      <!-- Collapsible content-->
    </div>
  </div>
</nav>

From your project directory, If you are using gulp version open src/js/navbar-vertical.js or if you are using directly from the pages folder open public/assets/js/theme.js and set isNavbarVerticalCollapsed: true to collapse the Vertical Navigation by default

const NAVBAR_VERTICAL_CONFIG = {
  isNavbarVerticalCollapsed: true
}

Normally, links in navbar vertical may contain icons, texts, badges and indicator icons. By default each elements in navbar vertical's links are vertically centered with each other. Navbar vertical's top parent link example:

<a class="nav-link" href="#">
  <div class="d-flex align-items-center">
    <span class="nav-link-icon"><span class="fas fa-chart-pie"></span></span>
    <span class="nav-link-text">Dashboard </span>
    <span class="badge rounded-pill badge-soft-success ms-2">New</span>
  </div>
</a>

If you have long texts or you want to update the alignment, you can customize by removing align-items-center class or adding Bootstrap align-items-* helper classes.

Child link example:

<a class="nav-link" href="#">
  <div class="d-flex align-items-center">
    Dashboard
    <span class="badge rounded-pill badge-soft-success ms-2">New</span>
  </div>
</a>

Add dropdown-indicator class to .nav-link element to show arrow icon to the right side of the link text.

<a class="nav-link dropdown-indicator" href="#">

  <!-- link content-->
</a>

const navbarVerticalToggle = document.querySelector(.navbar-vertical-toggle);
navbarVerticalToggle.addEventListener('navbar-vertical-toggle', function () {
  // do something...
})

Add .navbar-inverted class to .navbar-vertical element to convert Transparent Vertical Navbar to Inverted Vertical Navbar.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-inverted">

  <!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">

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

You can change background-color by adding .bg-* utility classes in .navbar-collapse element or you can update globally using the SCSS variable which is described in SCSS section below.

<div class="collapse navbar-collapse bg-1000">
   <div class="navbar-vertical-content scrollbar">

     <!-- Navbar content-->
   </div>
 </div>

Falcon allow you to customize your Navbar Inverted with SCSS variables. The available options are listed below:

Background color

To change the background color of the Navbar Inverted, add the SCSS variable $navbar-inverted-bg in your _user-variables.scss. Example:

$navbar-inverted-bg: $gray-1000;

Link color

To change the color of the Navbar Inverted links, add the SCSS variable $navbar-inverted-link-color in your _user-variables.scss. Example:

$navbar-inverted-link-color: $gray-500;

Link hover color

To change the hover color of the Navbar Inverted links, add the SCSS variable $navbar-inverted-link-hover-color in your _user-variables.scss. Example:

$navbar-inverted-link-hover-color: $gray-200;

Link active color

To change the active color of the Navbar Inverted links, add the SCSS variable $navbar-inverted-link-active-color in your _user-variables.scss. Example:

$navbar-inverted-link-active-color: $gray-200;

Navbar inverted divider color

To change the divider color, add the SCSS variable $navbar-inverted-hr-color in your _user-variables.scss. Example:

$navbar-inverted-hr-color: rgba($white, 0.2);

Navbar inverted scrollbar color

To change the scrollbar color, add the SCSS variable $navbar-inverted-scrollbar-color in your _user-variables.scss. Example:

$navbar-inverted-scrollbar-color: $gray-400;

Add .navbar-vibrant class to .navbar-vertical element which will set a gradient-color and a background-image to the .navbar-collapse element. This style come from theme.css.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-vibrant">

  <!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">

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

You can change the background of navbar vibrant using inline style. Add style attribute to .navbar-collapse element to change the backgruond image property. Otherwise, you can change background using SCSS variable.

<div class="collapse navbar-collapse" style="background-image: linear-gradient(-45deg, rgba(0, 160, 255, 0.86), #0048a2), url(assets/img/generic/bg-navbar.png)">
  <div class="navbar-vertical-content scrollbar">

    <!-- Navbar content-->
  </div>
</div>

To customize your Navbar Vibrant you can use SCSS variables. The available options are listed below:

Background

To change the background of the Navbar vibrant, add the SCSS variable $navbar-vibrant-bg-image in your _user-variables.scss. You can update both overlay color and background image using this variable. Example:

$navbar-vibrant-bg-image: linear-gradient(-45deg, rgba(0, 160, 255, 0.86), #0048a2), url(../img/generic/bg-navbar.png);

Link color

To change the color of the Navbar Vibrant links, add the SCSS variable $navbar-vibrant-link-color in your _user-variables.scss. Example:

$navbar-vibrant-link-color: $gray-500;

Link hover color

To change the hover color of the Navbar Vibrant links, add the SCSS variable $navbar-vibrant-link-hover-color in your _user-variables.scss. Example:

$navbar-vibrant-link-hover-color: $gray-200;

Link active color

To change the active color of the Navbar Vibrant links, add the SCSS variable $navbar-vibrant-link-active-color in your _user-variables.scss. Example:

$navbar-vibrant-link-active-color: $gray-200;

Navbar vibrant divider

To change the divider color, add the SCSS variable $navbar-vibrant-hr-color in your _user-variables.scss. Example:

$navbar-vibrant-hr-color: rgba($white, 0.2);

Navbar vibrant scrollbar color

To change the scrollbar, add the SCSS variable $navbar-vibrant-scrollbar-color in your _user-variables.scss. Example:

$navbar-vibrant-scrollbar-color: $gray-400;

Add .navbar-card class to .navbar-vertical element to set white background and card shadow to the .navbar-collapse element to convert Transparent Navbar Vertical to Card Navbar Vertical.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-card">

  <!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">

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

You can change background-color by adding .bg-* utility classes in .navbar-collapse element or you can update globally using the SCSS variable which is described in SCSS section below.

<div class="collapse navbar-collapse bg-white">
   <div class="navbar-vertical-content scrollbar">

     <!-- Navbar content  -->
   </div>
 </div>