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

Combo navbar example

#### Navbar combo structure

Add `[data-navigation-type="combo"]` attribute in `Html` element to start with combo-navbar

    <!DOCTYPE html>
    <html data-navigation-type="combo">

      <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 </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;
    &lt;nav class=&quot;navbar navbar-top navbar-expand-lg&quot; data-move-target=&quot;navbarVerticalNav&quot; data-navbar-top=&quot;combo&quot;&gt;&lt;/nav&gt;</code></pre>

Phoenix used the Bootstrap's `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes in `.navbar` element to decide when the navbar vertical will expand or not.

    <nav class="navbar navbar-vertical navbar-expand-lg"></nav>
    <nav class="navbar navbar-top navbar-expand-lg" data-move-target="navbarVerticalNav" data-navbar-top="combo"></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

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

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

#### Horizontal Navbar appearance

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

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

## Combo navbar slim

Pheonix provides another layout for navbar vertical with navbar slim.

Combo navbar slim example

#### Navbar slim structure

    <!DOCTYPE html>
    <html class="navbar-combo" data-navbar-horizontal-shape="slim">

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

    </html>

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