Falcon | Dashboard & WebApp Template

Navbar Vertical

Here is the available built-in option of Falcon's powerful, responsive vertical navigation. The following sections describe how you can customize both the responsive breakpoint and collapsing behavior.

Responsive behavior

Falcon used the Bootstrap's .navbar-expand{-sm|-md|-lg|-xl} 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 -->
</nav>

Collapsing behavior

You can control the default collapsing behavior of Falcon's vertical navigation - whether it will show up with the collapsed or expanded state when the page loads.

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

const NAVBAR_VERTICAL_CONFIG = {
  isNavbarVerticalCollapsed: true
}