## 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

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 add `data-navbar-appearance="darker"` attribute in navber-vertical

    <nav class="navbar navbar-vertical navbar-expand-lg" data-navbar-appearance="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;

##### Demo widget

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

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize