<p class="mb-3">Phoenix used the Hummingbird'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-8"><code class="language-html">&lt;nav class=&quot;navbar navbar-vertical navbar-expand-lg&quot;&gt;&lt;/nav&gt;</code></pre>

<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-3">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-8"><code class="lang-html">const initialConfig = {
  phoenixIsNavbarVerticalCollapsed: false,
  ...
};
</code></pre>

<p>You can control Navbar vertical style of phoenix's between defaults and darker.</p>
<p class="mb-3">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><code class="lang-html">const initialConfig = {
  phoenixNavbarVerticalStyle: 'default' || 'darker',
  ...
};</code></pre>
<p class="mt-7 mb-3">Or to change navbar vertical color add <code>data-navbar-appearance="darker" </code>attribute in navbar-vertical </p><pre class="scrollbar mt-4"><code class="language-html">&lt;nav class=&quot;navbar navbar-vertical navbar-expand-lg&quot; data-navbar-appearance=&quot;darker&quot;&gt;&lt;/nav&gt;</code></pre>

<p class="mb-3">Phoenix Tailwind allow you to customize your Navbar Vertical with CSS variables. The available options are listed below: </p><pre class="language-css"><code class="lang-css">:root {
  --content-padding-x: --spacing(10);
  --content-padding-bottom: 6.375rem;
  --content-padding-top: calc(var(--navbar-top-height) + 2rem);
  --footer-height: 4rem;
  --navbar-vertical-width: 15.875rem;
  --navbar-vertical-icon-width: 1rem;

  --navbar-vertical-link-font-size: var(--text-md);
  --navbar-vertical-link-padding-y: 0.35rem;

  --navbar-vertical-dropdown-font-size: 0.8125rem;
  --navbar-vertical-dropdown-link-padding-x: --spacing(2);
  --navbar-vertical-dropdown-link-padding-y: --spacing(1);

  --navbar-vertical-footer-height: var(--footer-height);
  --navbar-footer-border-color: var(--border-color-base);
  --navbar-vertical-height: calc(100vh - var(--navbar-top-height));

  --navbar-vertical-content-height: calc(100vh - var(--navbar-top-height) - var(--navbar-vertical-footer-height));
  --navbar-vertical-content-padding-x: --spacing(2);
  --navbar-vertical-content-padding-y: --spacing(4);
  --navbar-vertical-label-font-size: var(--text-sm);

  --navbar-vertical-collapse-width: 4rem;
  --navbar-vertical-link-collapse-padding-x: 1.5rem;
  --navbar-vertical-collapse-padding-x: 2.5rem;
  --navbar-vertical-hover-width: 12.625rem;
  --navbar-vertical-collapsed-hover-shadow: 0.625rem 0 0.625rem -0.5625rem var(--navbar-vertical-collapsed-hover-shadow-color);

  --navbar-vertical-border-color: var(--border-color-base);
  --navbar-vertical-bg-color: var(--background-color-body-emphasis);
  --navbar-vertical-label-color: var(--gray-600);
  --navbar-vertical-link-color: var(--gray-700);
  --navbar-vertical-link-hover-color: var(--text-color-body-secondary);
  --navbar-vertical-link-hover-bg: var(--gray-100);
  --navbar-vertical-link-active-color: var(--color-primary);
  --navbar-vertical-link-disable-color: var(--gray-500);

  --navbar-vertical-collapsed-menu-bg: var(--color-white);
  --navbar-vertical-hr-color: var(--gray-200);
  --navbar-vertical-dropdown-indicator-color: var(--gray-500);
}</code></pre>