Vertical 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.
Vertical navbar example<!DOCTYPE html>
<html>
<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>
<p class="mb-0">Phoenix used the Bootstrap'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-5"><code class="language-html"><nav class="navbar navbar-vertical navbar-expand-lg"></nav></code></pre>
Phoenix used the Bootstrap's .navbar-expand{-sm|-md|-lg|-xl|-xxl}
classes in .navbar-vertical
element to decide when the navbar vertical will expand or not.
<nav class="navbar navbar-vertical navbar-expand-lg"></nav>
<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/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-5"><code class="lang-html">const initialConfig = {
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/config.js
and set phoenixIsNavbarVerticalCollapsed: true
of initialConfig
object to collapse the Vertical Navigation by default
const initialConfig = {
phoenixIsNavbarVerticalCollapsed: false,
...
};
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/config.js
and set phoenixNavbarVerticalStyle: 'darker'
of initialConfig
object to collapse the Vertical Navigation by default
const initialConfig = {
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>
<p>Phoenix allow you to customize your Navbar Vertical with SCSS or CSS variables. The available options are listed below: </p>
<h5>Background color</h5>
<p class="my-2">To change the background color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-bg-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-bg-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-bg-color: #141824;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-bg-color: #141824;</code></pre>
<h5>Border color</h5>
<p class="my-2">To change the border color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-border-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-border-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-border-color: #31374a;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-border-color: #31374a;</code></pre>
<h5>label color</h5>
<p class="my-2">To change the label color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-label-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-label-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-label-color: #6e7891;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-label-color: #6e7891;</code></pre>
<h5>Link color</h5>
<p class="my-2">To change the link color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-link-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-link-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-link-color: #9fa6bc;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-color: #9fa6bc;</code></pre>
<h5>Link hover background</h5>
<p class="my-2">To change the link hover background of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-link-hover-bg</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-link-hover-bg</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-link-hover-bg: #31374a;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-hover-bg: #31374a;</code></pre>
<h5>Link hover color</h5>
<p class="my-2">To change the link hover color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-link-hover-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-link-hover-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-link-hover-color: #eff2f6;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-hover-color: #eff2f6;</code></pre>
<h5>Link active color</h5>
<p class="my-2">To change the link active color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-link-active-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-link-active-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-link-active-color: #fff;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-active-color: #fff;</code></pre>
<h5>Horizontal rule</h5>
<p class="my-2">To change the horizontal rule of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-hr-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-hr-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-hr-color: #3e465b;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-hr-color: #3e465b;</code></pre>
<h5>Dropdown indicator color</h5>
<p class="my-2">To change the dropdown indicator color of the Navbar Vertical , update the SCSS variable <code>$navbar-vertical-dropdown-indicator-color</code> in your <code>_user-variables.scss </code>or CSS variable <code>--phoenix-navbar-vertical-dropdown-indicator-color</code> in your <code>public/assets/css/user.css. </code>Example:</p><pre class="mb-4"><code class="language-css">//- _user-variables.scss
$navbar-vertical-dropdown-indicator-color: #8a94ad;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-dropdown-indicator-color: #8a94ad;</code></pre>
Phoenix allow you to customize your Navbar Vertical with SCSS or CSS variables. The available options are listed below:
Background color
To change the background color of the Navbar Vertical , update the SCSS variable $navbar-vertical-bg-color
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-bg-color
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-bg-color: #141824;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-bg-color: #141824;
Border color
To change the border color of the Navbar Vertical , update the SCSS variable $navbar-vertical-border-color
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-border-color
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-border-color: #31374a;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-border-color: #31374a;
label color
To change the label color of the Navbar Vertical , update the SCSS variable $navbar-vertical-label-color
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-label-color
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-label-color: #6e7891;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-label-color: #6e7891;
Link color
To change the link color of the Navbar Vertical , update the SCSS variable $navbar-vertical-link-color
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-link-color
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-link-color: #9fa6bc;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-color: #9fa6bc;
Link hover background
To change the link hover background of the Navbar Vertical , update the SCSS variable $navbar-vertical-link-hover-bg
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-link-hover-bg
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-link-hover-bg: #31374a;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-hover-bg: #31374a;
Link hover color
To change the link hover color of the Navbar Vertical , update the SCSS variable $navbar-vertical-link-hover-color
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-link-hover-color
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-link-hover-color: #eff2f6;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-hover-color: #eff2f6;
Link active color
To change the link active color of the Navbar Vertical , update the SCSS variable $navbar-vertical-link-active-color
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-link-active-color
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-link-active-color: #fff;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-link-active-color: #fff;
Horizontal rule
To change the horizontal rule of the Navbar Vertical , update the SCSS variable $navbar-vertical-hr-color
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-hr-color
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-hr-color: #3e465b;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-hr-color: #3e465b;
Dropdown indicator color
To change the dropdown indicator color of the Navbar Vertical , update the SCSS variable $navbar-vertical-dropdown-indicator-color
in your _user-variables.scss
or CSS variable --phoenix-navbar-vertical-dropdown-indicator-color
in your public/assets/css/user.css.
Example:
//- _user-variables.scss
$navbar-vertical-dropdown-indicator-color: #8a94ad;
or,
//- public/assets/css/user.css
--phoenix-navbar-vertical-dropdown-indicator-color: #8a94ad;