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/theme.js </code>and set <code>phoenixIsNavbarVerticalCollapsed: true </code>of <code>CONFIG </code>object to collapse the Vertical Navigation by default</p><pre class="scrollbar mt-5"><code class="lang-html">const CONFIG = {
  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/theme.js and set phoenixIsNavbarVerticalCollapsed: true of CONFIG object to collapse the Vertical Navigation by default

const CONFIG = {
  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/theme.js </code>and set <code>phoenixNavbarVerticalStyle: 'darker' </code>of <code>CONFIG </code>object to collapse the Vertical Navigation by default</p><pre class="scrollbar my-5"><code class="lang-html">const CONFIG = {
  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/theme.js and set phoenixNavbarVerticalStyle: 'darker' of CONFIG object to collapse the Vertical Navigation by default

const CONFIG = {
  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>

Horizontal Navbar appearance

<p>You can control top nav style of vertical navbar between defaults and darker.</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/theme.js </code>and set <code>phoenixNavbarTopStyle: darker </code>of <code>CONFIG </code>object to collapse the Vertical Navigation by default</p><pre class="scrollbar my-5"><code class="lang-html">const CONFIG = {
  phoenixNavbarTopStyle: '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-top navbar-darker&quot;&gt;&lt;/nav&gt;</code></pre>

You can control top nav style of vertical navbar 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/theme.js and set phoenixNavbarTopStyle: darker of CONFIG object to collapse the Vertical Navigation by default

const CONFIG = {
  phoenixNavbarTopStyle: 'default' || 'darker',
  ...
};

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

<nav class="navbar navbar-top navbar-darker"></nav>

Horizontal navbar slim

Pheonix provides another layout for navbar vertical with navbar slim.

Navbar slim example

Navbar slim structure

<!DOCTYPE html>
<html>

  <head>...</head>

  <body class="nav-slim">
    <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-slim">
          <!-- navbar top slim content goes here-->
        </nav>
        <div class="content">
          <!--  content goes here-->
        </div>
      </div>
    </main>
  </body>

</html>
Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

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