Vertical Navbar

Here is the default Phoenix's powerful, responsive vertical navigation. The following sections describe how you can customize both the responsive breakpoint and collapsing behavior.

Vertical navbar example

Navbar vertical structure

<!DOCTYPE html>
<html>

  <head>...</head>

  <body>
    <main>
      <div class="container-fluid">
        <nav class="navbar navbar-vertical navbar-expand-lg">
          <!-- navbar vertical content goes here-->
        </nav>
        <nav class="navbar navbar-top navbar-expand">
          <!-- navbar top content goes here-->
        </nav>
        <div class="content">
          <!--  content goes here-->
        </div>
      </div>
    </main>
  </body>

</html>

Responsive behavior 

<p class="mb-0">Phoenix used the Bootstrap's <code>.navbar-expand{-sm|-md|-lg|-xl|-xxl} </code> classes in <code>.navbar-vertical </code>element to decide when the navbar vertical will expand or not.</p><pre class="scrollbar mt-5"><code class="language-html">&lt;nav class=&quot;navbar navbar-vertical navbar-expand-lg&quot;&gt;&lt;/nav&gt;</code></pre>

Phoenix 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-lg"></nav>

Collapsing behavior

<p>You can control the default collapsing behavior of phoenix's vertical navigation - whether it will show up with the collapsed or expanded state when the page loads.</p>
<p class="mb-0">From your project directory, If you are using gulp version open <code>src/js/config.js </code>or if you are using directly from the public folder open <code>public/assets/js/config.js </code>and set <code>phoenixIsNavbarVerticalCollapsed: true </code>of <code>initialConfig </code>object to collapse the Vertical Navigation by default</p><pre class="scrollbar mt-5"><code class="lang-html">const initialConfig = {
  phoenixIsNavbarVerticalCollapsed: false,
  ...
};
</code></pre>

You can control the default collapsing behavior of phoenix'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 src/js/config.js or if you are using directly from the public folder open public/assets/js/config.js and set phoenixIsNavbarVerticalCollapsed: true of initialConfig object to collapse the Vertical Navigation by default

const initialConfig = {
  phoenixIsNavbarVerticalCollapsed: false,
  ...
};

Vertical Navbar appearance

<p>You can control Navbar vertical style of phoenix's between defaults and darker.</p>
<p>From your project directory, If you are using gulp version open <code>src/js/config.js </code>or if you are using directly from the public folder open <code>public/assets/js/config.js </code>and set <code>phoenixNavbarVerticalStyle: 'darker' </code>of <code>initialConfig </code>object to collapse the Vertical Navigation by default</p><pre class="scrollbar my-5"><code class="lang-html">const initialConfig = {
  phoenixNavbarVerticalStyle: 'default' || 'darker',
  ...
};</code></pre>
<p class="mb-0">Or to change navbar vertical color just add <code>navbar-darker </code>css class with <code>navber-vertical </code>class</p><pre class="scrollbar mt-3"><code class="language-html">&lt;nav class=&quot;navbar navbar-vertical navbar-expand-lg navbar-darker&quot;&gt;&lt;/nav&gt;</code></pre>

You can control Navbar vertical style of phoenix's between defaults and darker.

From your project directory, If you are using gulp version open src/js/config.js or if you are using directly from the public folder open public/assets/js/config.js and set phoenixNavbarVerticalStyle: 'darker' of initialConfig object to collapse the Vertical Navigation by default

const initialConfig = {
  phoenixNavbarVerticalStyle: 'default' || 'darker',
  ...
};

Or to change navbar vertical color just add navbar-darker css class with navber-vertical class

<nav class="navbar navbar-vertical navbar-expand-lg navbar-darker"></nav>

Customize

<p>Phoenix allow you to customize your Navbar Vertical with SCSS or CSS variables. The available options are listed below: </p>
<h5>Background color</h5>
<p class="my-2">To change the background color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-bg-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-bg-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-bg-color: #141824;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-bg-color: #141824;</code></pre>
<h5>Border color</h5>
<p class="my-2">To change the border color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-border-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-border-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-border-color: #31374a;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-border-color: #31374a;</code></pre>
<h5>label color</h5>
<p class="my-2">To change the label color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-label-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-label-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-label-color: #6e7891;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-label-color: #6e7891;</code></pre>
<h5>Link color</h5>
<p class="my-2">To change the link color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-link-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-link-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-link-color: #9fa6bc;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-color: #9fa6bc;</code></pre>
<h5>Link hover background</h5>
<p class="my-2">To change the link hover background of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-link-hover-bg</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-link-hover-bg</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-link-hover-bg: #31374a;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-hover-bg: #31374a;</code></pre>
<h5>Link hover color</h5>
<p class="my-2">To change the link hover color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-link-hover-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-link-hover-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-link-hover-color: #eff2f6;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-hover-color: #eff2f6;</code></pre>
<h5>Link active color</h5>
<p class="my-2">To change the link active color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-link-active-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-link-active-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-link-active-color: #fff;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-active-color: #fff;</code></pre>
<h5>Horizontal rule</h5>
<p class="my-2">To change the horizontal rule of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-hr-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-hr-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-hr-color: #3e465b;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-hr-color: #3e465b;</code></pre>
<h5>Dropdown indicator color</h5>
<p class="my-2">To change the dropdown indicator color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-dropdown-indicator-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-dropdown-indicator-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-dropdown-indicator-color: #8a94ad;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-dropdown-indicator-color: #8a94ad;</code></pre>

Phoenix allow you to customize your Navbar Vertical with SCSS or CSS variables. The available options are listed below:

Background color

To change the background color of the Navbar Vertical , update the SCSS variable $navbar-vertical-bg-color in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-bg-color in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-bg-color: #141824;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-bg-color: #141824;
Border color

To change the border color of the Navbar Vertical , update the SCSS variable $navbar-vertical-border-color in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-border-color in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-border-color: #31374a;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-border-color: #31374a;
label color

To change the label color of the Navbar Vertical , update the SCSS variable $navbar-vertical-label-color in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-label-color in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-label-color: #6e7891;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-label-color: #6e7891;
Link color

To change the link color of the Navbar Vertical , update the SCSS variable $navbar-vertical-link-color in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-link-color in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-link-color: #9fa6bc;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-color: #9fa6bc;
Link hover background

To change the link hover background of the Navbar Vertical , update the SCSS variable $navbar-vertical-link-hover-bg in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-link-hover-bg in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-link-hover-bg: #31374a;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-hover-bg: #31374a;
Link hover color

To change the link hover color of the Navbar Vertical , update the SCSS variable $navbar-vertical-link-hover-color in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-link-hover-color in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-link-hover-color: #eff2f6;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-hover-color: #eff2f6;
Link active color

To change the link active color of the Navbar Vertical , update the SCSS variable $navbar-vertical-link-active-color in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-link-active-color in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-link-active-color: #fff;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-active-color: #fff;
Horizontal rule

To change the horizontal rule of the Navbar Vertical , update the SCSS variable $navbar-vertical-hr-color in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-hr-color in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-hr-color: #3e465b;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-hr-color: #3e465b;
Dropdown indicator color

To change the dropdown indicator color of the Navbar Vertical , update the SCSS variable $navbar-vertical-dropdown-indicator-color in your _user-variables.scss or CSS variable --phoenix-navbar-vertical-dropdown-indicator-color in your public/assets/css/user.css. Example:

//- _user-variables.scss
$navbar-vertical-dropdown-indicator-color: #8a94ad;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-dropdown-indicator-color: #8a94ad;

Thank you for creating with Phoenix|
2023 ©Themewagon

v1.12.0

Demo widget
Request a callbackSearch in chatShow historyReport to AdminClose Support

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize