فالکون از کلاس های Bootstrap .navbar-expand{-sm|-md|-lg|-xl|-xxl} در .navbar-vertical عنصر استفاده کرد تا تصمیم بگیرد که چه زمانی نوار ناوبری عمودی گسترش می یابد یا نه.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light">
<!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">
<!-- Collapsible content--></div>
  </div>
</nav>

اگر از دایرکتوری پروژه خود استفاده می‌کنید، اگر از نسخه gulp open استفاده می‌کنید src/js/config.js یا اگر مستقیماً از پوشه عمومی استفاده می‌کنید، به‌طور پیش‌فرض از پوشه عمومی باز کنید public/assets/js/theme.js و مجموعه isNavbarVerticalCollapsed: true شی را CONFIG برای جمع کردن Vertical Navigation باز کنید.

const CONFIG = {
  isNavbarVerticalCollapsed: false,
  ...
};

به طور معمول، پیوندها در نوار ناوبری عمودی ممکن است حاوی نمادها، متون، نشان ها و نمادهای نشانگر باشند. به طور پیش فرض هر عنصر در پیوندهای نوار ناوبری عمودی در مرکز یکدیگر قرار دارند. مثال پیوند والد بالای نوار ناوبری عمودی:

<a class="nav-link" href="#">
  <div class="d-flex align-items-center">
    <span class="nav-link-icon"><span class="fas fa-chart-pie"></span></span>
    <span class="nav-link-text">Dashboard </span>
    <span class="badge rounded-pill badge-subtle-success ms-2">New</span>
  </div>
</a>

اگر متن‌های طولانی دارید یا می‌خواهید تراز را به‌روزرسانی کنید، می‌توانید با حذف align-items-center کلاس یا اضافه کردن align-items-* کلاس‌های کمکی Bootstrap سفارشی کنید.

مثال پیوند کودک:

<a class="nav-link" href="#">
  <div class="d-flex align-items-center">
    Dashboard
    <span class="badge rounded-pill badge-subtle-success ms-2">New</span>
  </div>
</a>

dropdown-indicator کلاس را به عنصر اضافه کنید .nav-link تا نماد پیکان در سمت راست متن پیوند نشان داده شود.

<a class="nav-link dropdown-indicator" href="#">
<!-- link content-->
</a>

const navbarVerticalToggle = document.querySelector(.navbar-vertical-toggle);
navbarVerticalToggle.addEventListener('navbar.vertical.toggle', function () {
  // do something...
})

کلاس .navbar-vertical نشان دهنده نوار ناوبری عمودی شفاف پیش فرض است.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light">
<!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">
<!-- Navbar content--></div>
  </div>
</nav>

می‌توانید background-color با افزودن .bg-* کلاس‌های ابزار در .navbar-collapse عنصر تغییر دهید یا می‌توانید با استفاده از متغیر SCSS یا CSS که در بخش سفارشی‌سازی در زیر توضیح داده شده است، به‌صورت جهانی به‌روزرسانی کنید.

<div class="collapse navbar-collapse bg-1000">
   <div class="navbar-vertical-content scrollbar">
<!-- Navbar content--></div>
 </div>

Falcon به شما این امکان را می دهد که نوار ناوبری عمودی خود را با متغیرهای SCSS یا CSS سفارشی کنید. گزینه های موجود در زیر لیست شده اند:

رنگ پس زمینه

برای تغییر رنگ پس‌زمینه Navbar Vertical، متغیر SCSS را $navbar-vertical-default-bg-color در خود _user-variables.scss یا متغیر CSS --falcon-navbar-vertical-default-bg-color را در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-default-bg-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-default-bg-color: #ff0000;

رنگ پیوند

برای تغییر رنگ پیوند نوار عمودی، متغیر SCSS را $navbar-vertical-default-link-color در خود _user-variables.scss یا متغیر CSS --falcon-navbar-vertical-default-link-color را در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-default-link-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-default-link-color: #ff0000;

رنگ شناور پیوند

برای تغییر رنگ شناور پیوند در نوار عمودی، متغیر SCSS را $navbar-vertical-default-link-hover-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-default-link-hover-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-default-link-hover-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-default-link-hover-color: #ff0000;

پیوند رنگ فعال

برای تغییر رنگ فعال پیوند نوار عمودی، متغیر SCSS را $navbar-vertical-default-link-active-color در خود _user-variables.scss یا متغیر CSS --falcon-navbar-vertical-default-link-active-color را در خود به روز کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-default-link-active-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-default-link-active-color: #ff0000;

رنگ تقسیم کننده

برای تغییر رنگ تقسیم‌کننده نوار عمودی، متغیر SCSS را $navbar-vertical-default-hr-color در خود _user-variables.scss یا متغیر CSS --falcon-navbar-vertical-default-hr-color را در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-default-hr-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-default-hr-color: #ff0000;

رنگ نوار پیمایش

برای تغییر رنگ نوار پیمایش نوار ناوبری عمودی، متغیر SCSS را $navbar-vertical-default-scrollbar-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-default-scrollbar-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-default-scrollbar-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-default-scrollbar-color: #ff0000;

برای تبدیل نوار ناوبری شفاف عمودی به نوار ناوبری عمودی معکوس، .navbar-inverted کلاس را به عنصر اضافه کنید . .navbar-vertical

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-inverted">
<!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">
<!-- Navbar content--></div>
  </div>
</nav>

می‌توانید background-color با افزودن .bg-* کلاس‌های ابزار در .navbar-collapse عنصر تغییر دهید یا می‌توانید با استفاده از متغیر SCSS که در بخش SCSS زیر توضیح داده شده است، به‌صورت سراسری به‌روزرسانی کنید.

<div class="collapse navbar-collapse bg-1000">
   <div class="navbar-vertical-content scrollbar">
<!-- Navbar content--></div>
 </div>

Falcon به شما این امکان را می دهد که نوار ناوبری عمودی خود را با متغیرهای SCSS یا CSS سفارشی کنید. گزینه های موجود در زیر لیست شده اند:

رنگ پس زمینه

برای تغییر رنگ پس‌زمینه Navbar Vertical Inverted، متغیر SCSS را $navbar-vertical-inverted-bg-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-inverted-bg-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-inverted-bg-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-inverted-bg-color: #ff0000;

رنگ پیوند

برای تغییر رنگ پیوند Navbar Vertical Inverted، متغیر SCSS را $navbar-vertical-inverted-link-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-inverted-link-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-inverted-link-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-inverted-link-color: #ff0000;

رنگ شناور پیوند

برای تغییر رنگ شناور پیوند نوار ناوبری وارونه عمودی، متغیر SCSS را $navbar-vertical-inverted-link-hover-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-inverted-link-hover-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-inverted-link-hover-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-inverted-link-hover-color: #ff0000;

پیوند رنگ فعال

برای تغییر رنگ فعال پیوند نوار عمودی معکوس، متغیر SCSS را $navbar-vertical-inverted-link-active-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-inverted-link-active-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-inverted-link-active-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-inverted-link-active-color: #ff0000;

رنگ تقسیم کننده

برای تغییر رنگ تقسیم‌کننده Navbar Vertical Inverted، متغیر SCSS را $navbar-vertical-inverted-hr-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-inverted-hr-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-inverted-hr-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-inverted-hr-color: #ff0000;

رنگ نوار پیمایش

برای تغییر رنگ نوار پیمایش نوار ناوبری وارونه عمودی، متغیر SCSS را $navbar-vertical-inverted-scrollbar-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-inverted-scrollbar-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-inverted-scrollbar-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-inverted-scrollbar-color: #ff0000;

.navbar-vibrant کلاس را به عنصر اضافه کنید .navbar-vertical که a gradient-color و a را background-image به .navbar-collapse عنصر تنظیم می کند. این سبک از theme.css .

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-vibrant">
<!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">
<!-- Navbar content--></div>
  </div>
</nav>

می‌توانید پس‌زمینه نوار ناوبری پر جنب و جوش را با استفاده از سبک درون خطی تغییر دهید. .navbar-collapse برای تغییر ویژگی تصویر پس زمینه، ویژگی style را به عنصر اضافه کنید . در غیر این صورت، می توانید پس زمینه را با استفاده از متغیر SCSS تغییر دهید.

<div class="collapse navbar-collapse" style="background-image: linear-gradient(-45deg, rgba(0, 160, 255, 0.86), #0048a2), url(assets/img/generic/bg-navbar.png)">
  <div class="navbar-vertical-content scrollbar">
<!-- Navbar content--></div>
</div>

Falcon به شما این امکان را می دهد که نوار ناوبری عمودی خود را با متغیرهای SCSS یا CSS سفارشی کنید. گزینه های موجود در زیر لیست شده اند:

زمینه

برای تغییر پس‌زمینه Navbar Vertical Vibrant، متغیر SCSS را $navbar-vertical-vibrant-bg-image در خود _user-variables.scss یا متغیر CSS --falcon-navbar-vertical-vibrant-bg-image را در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-vibrant-bg-image: linear-gradient(-45deg,rgba(0, 160, 255, 0.86),#0048a2);
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-vibrant-bg-image: linear-gradient(-45deg,rgba(0, 160, 255, 0.86),#0048a2);

رنگ پیوند

برای تغییر رنگ پیوند Navbar Vertical Vibrant، متغیر SCSS را $navbar-vertical-vibrant-link-color در خود _user-variables.scss یا متغیر CSS --falcon-navbar-vertical-vibrant-link-color را در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-vibrant-link-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-vibrant-link-color: #ff0000;

رنگ شناور پیوند

برای تغییر رنگ شناور پیوند در Navbar Vertical Vibrant، متغیر SCSS را $navbar-vertical-vibrant-link-hover-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-vibrant-link-hover-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-vibrant-link-hover-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-vibrant-link-hover-color: #ff0000;

پیوند رنگ فعال

برای تغییر رنگ فعال پیوند Navbar Vertical Vibrant، متغیر SCSS را $navbar-vertical-vibrant-link-active-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-vibrant-link-active-color در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-vibrant-link-active-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-vibrant-link-active-color: #ff0000;

رنگ تقسیم کننده

برای تغییر رنگ تقسیم‌کننده Navbar Vertical Vibrant، متغیر SCSS را $navbar-vertical-vibrant-hr-color در خود _user-variables.scss یا متغیر CSS --falcon-navbar-vertical-vibrant-hr-color را در خود به‌روزرسانی کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-vibrant-hr-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-vibrant-hr-color: #ff0000;

رنگ نوار پیمایش

برای تغییر رنگ نوار پیمایش نوار عمودی پر جنب و جوش، متغیر SCSS را $navbar-vertical-vibrant-scrollbar-color در خود _user-variables.scss یا متغیر CSS را --falcon-navbar-vertical-vibrant-scrollbar-color در خود به روز کنید public/assets/css/user.css . مثال:

//- _user-variables.scss
$navbar-vertical-vibrant-scrollbar-color: #ff0000;
or,
//- public/assets/css/user.css
--falcon-navbar-vertical-vibrant-scrollbar-color: #ff0000;

.navbar-card کلاس را به عنصر اضافه کنید .navbar-vertical تا پس‌زمینه سفید و سایه کارت را به .navbar-collapse عنصر تبدیل کنید تا Transparent Navbar Vertical به Card Navbar Vertical تبدیل شود.

<nav class="navbar navbar-vertical navbar-expand-xl navbar-light navbar-card">
<!-- Content-->
  <div class="collapse navbar-collapse">
    <div class="navbar-vertical-content scrollbar">
<!-- Navbar content--></div>
  </div>
</nav>

می‌توانید background-color با افزودن .bg-* کلاس‌های ابزار در .navbar-collapse عنصر تغییر دهید یا می‌توانید با استفاده از متغیر SCSS که در بخش SCSS زیر توضیح داده شده است، به‌صورت سراسری به‌روزرسانی کنید.

<div class="collapse navbar-collapse bg-white">
   <div class="navbar-vertical-content scrollbar">
 <!-- Navbar content  --></div>
 </div>