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|-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 perfect-scrollbar">
<!-- Collapsible content-->
</div>
</div>
</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
}
Link
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 badge-pill badge-soft-success ml-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 badge-pill badge-soft-success ml-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>
Navbar Styles
You can change the look of your Navbar Vertical in different styles. You can also customize your navbar vertical using SCSS variables. The different navbar styles are listed below:
Html
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 perfect-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 perfect-scrollbar">
<!-- Navbar content-->
</div>
</div>
SCSS
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 vairable $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 vairable $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 vairable $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 vairable $navbar-inverted-scrollbar-color
in your _user-variables.scss
. Example:
$navbar-inverted-scrollbar-color: $gray-400;
Html
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 perfect-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 perfect-scrollbar">
<!-- Navbar content-->
</div>
</div>
SCSS
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 vairable $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 vairable $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 vairable $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 vairable $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 vairable $navbar-vibrant-scrollbar-color
in your _user-variables.scss
. Example:
$navbar-vibrant-scrollbar-color: $gray-400;
Html
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 perfect-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 perfect-scrollbar">
<!-- Navbar content-->
</div>
</div>
SCSS
You can also update your Navbar Card style by using SCSS variables. The available options are listed below:
Background color
To change the background color of the Navbar Card, add the SCSS variable $navbar-card-bg
in your _user-variables.scss
. Example:
$navbar-card-bg: $white;
Navbar card shadow
To change the shadow of the Navbar Card, add the SCSS vairable $navbar-card-shadow
in your _user-variables.scss
. Example:
$navbar-card-shadow: $box-shadow;
Link color
To change the color of the Navbar Card links, add the SCSS variable $navbar-card-link-color
in your _user-variables.scss
. Example:
$navbar-card-link-color: $gray-700;
Link hover color
To change the hover color of the Navbar Card links, add the SCSS vairable $navbar-card-link-hover-color
in your _user-variables.scss
. Example:
$navbar-card-link-hover-color: $gray-900;
Link active color
To change the active color of the Navbar Card links, add the SCSS vairable $navbar-card-link-active-color
in your _user-variables.scss
. Example:
$navbar-card-link-active-color: $gray-900;
Navbar card divider
To change the divider color, add the SCSS vairable $navbar-card-hr-color
in your _user-variables.scss
. Example:
$navbar-card-hr-color: $gray-300;
Navbar card scrollbar color
To change the scrollbar color, add the SCSS vairable $navbar-card-scrollbar-color
in your _user-variables.scss
. Example:
$navbar-card-scrollbar-color: $gray-400;