Horizontal Navbar

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

Horizontal navbar example

Horizontal Navbar structure

<p class="mb-3">Add <code>[data-navigation-type="horizontal"]</code>attribute in <code>Html </code>element to start with horizontal-navbar</p><pre class="scrollbar my-8"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html data-navigation-type=&quot;horizontal&quot;&gt;

  &lt;head&gt;...&lt;/head&gt;

  &lt;body&gt;
    &lt;main&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
        &lt;nav class=&quot;navbar navbar-top navbar-expand-lg&quot;&gt;
          &lt;!-- navbar horizontal content goes here--&gt;
        &lt;/nav&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;!--  content goes here--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/body&gt;

&lt;/html&gt;</code></pre>

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

Phoenix used the Hummingbird'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

<p>You can control top nav style of vertical navbar 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/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-8"><code class="lang-html">const CONFIG = {
  phoenixNavbarTopStyle: 'default' || 'darker',
  ...
};
</code></pre>
<p class="mt-7 mb-3">Or to change navbar horizontal color add <code>data-navbar-appearance="darker" </code>attribute in <code>navber-top</code></p><pre class="scrollbar mt-4"><code class="language-html">&lt;nav class=&quot;navbar navbar-top&quot; data-navbar-appearance=&quot;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 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

<pre class="scrollbar my-8"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html data-navbar-horizontal-shape=&quot;slim&quot;&gt;

  &lt;head&gt;...&lt;/head&gt;

  &lt;body&gt;
    &lt;main&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
        &lt;nav class=&quot;navbar navbar-top navbar-expand-lg navbar-slim&quot;&gt;
          &lt;!-- navbar horizontal content goes here--&gt;
        &lt;/nav&gt;
        &lt;div class=&quot;content&quot;&gt;
          &lt;!--  content goes here--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/body&gt;

&lt;/html&gt;</code></pre>
<!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>

Customize

<p class="mb-3">Phoenix Tailwind allow you to customize your Navbar Horizontal with CSS variables. The available options are listed below: </p><pre class="language-css"><code class="lang-css">:root {
  --navbar-top-height: 4rem;
  --navbar-top-bg-color: var(--background-color-body-emphasis);
  --navbar-top-link-padding-start: 1.125rem;
  --navbar-top-link-padding-end: 1.5rem;
  --navbar-top-link-color: var(--text-color-body);
  --theme-control-toggle-bg: --alpha(var(--color-orange-300) / 24%);
  --theme-control-toggle-color: var(--color-warning);
  --theme-control-toggle-hover-bg: var(--color-warning);
  --theme-control-toggle-hover-color: var(--background-color-warning-subtle);
  --navbar-top-dropdown-hover-bg: var(--background-color-body-highlight);
  --navbar-top-border-color: var(--gray-300);
  --navbar-top-menu-bg-color: var(--background-color-body-emphasis);
  --navbar-top-link-hover-bg: var(--background-color-body-highlight);
  --navbar-top-link-hover-color: var(--text-color-body-highlight);
  --navbar-top-dropdown-color: var(--text-color-body);
  --navbar-top-link-active-color: var(--color-primary);
}</code></pre>

Phoenix Tailwind allow you to customize your Navbar Horizontal with CSS variables. The available options are listed below: 

:root {
  --navbar-top-height: 4rem;
  --navbar-top-bg-color: var(--background-color-body-emphasis);
  --navbar-top-link-padding-start: 1.125rem;
  --navbar-top-link-padding-end: 1.5rem;
  --navbar-top-link-color: var(--text-color-body);
  --theme-control-toggle-bg: --alpha(var(--color-orange-300) / 24%);
  --theme-control-toggle-color: var(--color-warning);
  --theme-control-toggle-hover-bg: var(--color-warning);
  --theme-control-toggle-hover-color: var(--background-color-warning-subtle);
  --navbar-top-dropdown-hover-bg: var(--background-color-body-highlight);
  --navbar-top-border-color: var(--gray-300);
  --navbar-top-menu-bg-color: var(--background-color-body-emphasis);
  --navbar-top-link-hover-bg: var(--background-color-body-highlight);
  --navbar-top-link-hover-color: var(--text-color-body-highlight);
  --navbar-top-dropdown-color: var(--text-color-body);
  --navbar-top-link-active-color: var(--color-primary);
}

Thank you for creating with Phoenix Tailwind2026 ©ThemeWagon

v1.0.0-beta

Demo widget
Request a callbackSearch in chatShow historyReport to AdminClose Support

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
RTL

Change text direction

Support Chat

Toggle support chat

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