## Horizontal Navbar

Horizontal Navbar is a different user friendly layout system in Phoenix.

Horizontal navbar example

#### Horizontal Navbar structure

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

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

      <head>...</head>

      <body>
        <main>
          <div class="container-fluid">
            <nav class="navbar navbar-top navbar-expand-lg">
              <!-- navbar horizontal 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-top </code>element to decide when the navbar top will expand or not.</p><pre class="scrollbar mt-5"><code class="language-html">&lt;nav class=&quot;navbar navbar-top 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-top` element to decide when the navbar top will expand or not.

    <nav class="navbar navbar-top navbar-expand-lg"></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 horizontal color add `data-navbar-appearance="darker"` attribute in `navber-top`

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

## Horizontal navbar slim

Reducing horizontal navbar height, Pheonix comes with another layout called horizontal navbar slim.

Horizontal navbar slim example

#### Horizontal Navbar slim structure

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

      <head>...</head>

      <body>
        <main>
          <div class="container-fluid">
            <nav class="navbar navbar-top navbar-expand-lg navbar-slim">
              <!-- navbar horizontal 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