Dual Nav
Dual Nav is a different horizontal layout system in Phoenix.
Dual nav exampleDual Nav structure
Add [data-navigation-type="dual"]attribute in Html element to start with dual nav.
<!DOCTYPE html>
<html data-navigation-type="dual">
<head>...</head>
<body>
<main>
<div class="container-fluid">
<nav class="navbar navbar-top fixed-top navbar-expand-lg">
<!-- navbar dual 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"><nav class="navbar navbar-top fixed-top navbar-expand-lg"></nav></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 fixed-top navbar-expand-lg"></nav>Dual Nav 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 top color add data-navbar-appearance="darker" attribute in navber-top
<nav class="navbar navbar-top" data-navbar-appearance="darker"></nav>
