.navi مترونیک گزینه های گوناگونی را ارائه می دهد تا بتوانید از جهت یابی منحصر به فرد و چند منظوره استفاده کنید.
استفاده از کلاس.navi
<div class="dropdown">
<a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown">
دراپ دان
</a>
<div class="dropdown-menu dropdown-menu-sm">
<ul class="navi">
<li class="navi-item">
<a class="navi-link active" href="#">
<span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
<span class="navi-text">فعال</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
<span class="navi-text">نمونه لینک</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link disabled" href="#">
<span class="navi-icon"><i class="flaticon2-calendar-8"></i></span>
<span class="navi-text">غیرفعال</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
<span class="navi-text">سایر لینک ها</span>
</a>
</li>
</ul>
</div>
</div>
استفاده از .navi با .navi-{light|lighter|bold|bolder|boldest}
<div class="dropdown">
<a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown">
دراپ دان
</a>
<div class="dropdown-menu dropdown-menu-sm">
<ul class="navi navi-bolder">
<li class="navi-item">
<a class="navi-link active" href="#">
<span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
<span class="navi-text">فعال</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
<span class="navi-text">نمونه لینک</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link disabled" href="#">
<span class="navi-icon"><i class="flaticon2-calendar-8"></i></span>
<span class="navi-text">غیرفعال</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
<span class="navi-text">سایر لینک ها</span>
</a>
</li>
</ul>
</div>
</div>
استفاده از .navi-header و .navi-footer.
<ul class="navi">
<li class="navi-header font-weight-bold py-5">
پرش به::
<i class="flaticon2-information" data-toggle="tooltip" data-placement="right" title="برای اطلاعات بیشتر کلیک کنید..."></i>
</li>
<li class="navi-separator mb-4"></li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
<span class="navi-text">پیام ها</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-expand"></i></span>
<span class="navi-text">مرکز پشتیبانی</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
<span class="navi-text">پروفایل</span>
</a>
</li>
<li class="navi-separator mt-4"></li>
</ul>
<div class="navi-footer py-5 ml-5 d-flex justify-content-between">
<a href="#" target="_blank" class="btn btn-light-primary font-weight-bold">خروج</a>
<a href="#" target="_blank" class="btn btn-clean font-weight-bold">ارتقا پلن</a>
</div>
استفاده از .navi-label با .label.
<ul class="navi">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
<span class="navi-text">پیام ها</span>
<span class="navi-label">
<span class="label label-danger">2</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
<span class="navi-text">تنظیمات</span>
<span class="navi-label">
<span class="label label-inline label-light-primary font-weight-bold">Updated</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
<span class="navi-text">پروفایل</span>
<span class="navi-label">
<span class="label label-inline label-success">جدید</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-mail"></i></span>
<span class="navi-text">سفارشات</span>
<span class="navi-label">
<span class="label label-inline label-dark">روی خط</span>
</span>
</a>
</li>
</ul>
استفاده از کلاس .navi-arrow.
<ul class="navi">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
<span class="navi-text">پیام ها</span>
<span class="navi-label">
<span class="label label-light-info font-weight-bold">2</span>
</span>
<span class="navi-arrow"></span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
<span class="navi-text">تنظیمات</span>
<span class="navi-label">
<span class="label label-inline label-light-primary font-weight-bold">Updated</span>
</span>
<span class="navi-arrow"></span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
<span class="navi-text">پروفایل</span>
<span class="navi-label">
<span class="label label-inline label-light-danger font-weight-bold">جدید</span>
</span>
<span class="navi-arrow"></span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-mail"></i></span>
<span class="navi-text">سفارشات</span>
<span class="navi-label">
<span class="label label-inline label-light-success font-weight-bold">در انتظار</span>
</span>
<span class="navi-arrow"></span>
</a>
</li>
</ul>
استفاده از کلاس ها .navi-bullet با .bullet
<ul class="navi">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-bullet">
<i class="bullet"></i>
</span>
<span class="navi-text">پیام ها</span>
<span class="navi-label">
<span class="label label-danger">2</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-bullet">
<i class="bullet"></i>
</span>
<span class="navi-text">وظایف</span>
<span class="navi-label">
<span class="label label-inline label-light-primary font-weight-bold">Updated</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-bullet">
<i class="bullet bullet-dot"></i>
</span>
<span class="navi-text">پروفایل</span>
<span class="navi-label">
<span class="label label-inline label-success">جدید</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-bullet">
<i class="bullet bullet-dot"></i>
</span>
<span class="navi-text">تنظیمات</span>
<span class="navi-label">
<span class="label label-rounded label-light-danger">3</span>
</span>
</a>
</li>
</ul>
استفاده از کلاس .navi-section برای گروه بندی و سکشن بندی.
<ul class="navi">
<li class="navi-section text-primary text-uppercase font-weight-bolder pb-0">
سکشن یک
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-analytics"></i></span>
<span class="navi-text">پیام ها</span>
<span class="navi-label">
<span class="label label-danger label-rounded">2</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link">
<span class="navi-icon"><i class="flaticon2-layers"></i></span>
<span class="navi-text">پروفایل</span>
</a>
</li>
<li class="navi-section mt-5 text-primary text-uppercase font-weight-bolder pb-0">
سکشن دو
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1"></i></span>
<span class="navi-text">وظایف</span>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-file"></i></span>
<span class="navi-text">سفارشات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-sms"></i></span>
<span class="navi-text">گزارشات</span>
</a>
</li>
</ul>
استفاده از کلاس .navi-separator برای جداکردن.
<ul class="navi">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-analytics"></i></span>
<span class="navi-text">پیام ها</span>
<span class="navi-label">
<span class="label label-success label-rounded">2</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-layers"></i></span>
<span class="navi-text">پروفایل</span>
</a>
</li>
<li class="navi-separator my-4"></li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1"></i></span>
<span class="navi-text">وظایف</span>
<span class="navi-label">
<span class="label label-info label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-file"></i></span>
<span class="navi-text">سفارشات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-sms"></i></span>
<span class="navi-text">گزارشات</span>
</a>
</li>
</ul>
استفاده از کلاس های .navi-hover و .navi-active
<ul class="navi navi-hover navi-active">
<li class="navi-item">
<a class="navi-link active" href="#">
<span class="navi-icon"><i class="flaticon2-analytics"></i></span>
<span class="navi-text">پیام ها</span>
<span class="navi-label">
<span class="label label-danger label-rounded">2</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-layers"></i></span>
<span class="navi-text">پروفایل</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1"></i></span>
<span class="navi-text">وظایف</span>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
</ul>
استفاده از .navi با .navi-link-rounded, .navi-link-rounded-lg و .navi-link-rounded-xl
<ul class="navi navi-hover">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-analytics text-danger"></i></span>
<span class="navi-text">پیام ها</span>
<span class="label label-light-danger font-weight-bold label-inline">new</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-pie-chart-2 text-warning"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1 text-success"></i></span>
<span class="navi-text">وظایف</span>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-file text-primary"></i></span>
<span class="navi-text">سفارشات</span>
</a>
</li>
</ul>
استفاده از کلاس .navi-accent.
<ul class="navi navi-hover navi-active navi-accent navi-link-rounded-lg">
<li class="navi-item">
<a class="navi-link active" href="#">
<span class="navi-icon"><i class="flaticon2-analytics"></i></span>
<span class="navi-text">پیام ها</span>
<span class="label label-light-danger font-weight-bold label-inline">new</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1"></i></span>
<span class="navi-text">وظایف</span>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-file"></i></span>
<span class="navi-text">سفارشات</span>
</a>
</li>
</ul>
استفاده از کلاس .navi-{color} .
<ul class="navi navi-hover navi-active navi-accent">
<li class="navi-item">
<a class="navi-link active" href="#">
<span class="navi-icon"><i class="flaticon2-analytics"></i></span>
<span class="navi-text">پیام ها</span>
<span class="label label-light-danger font-weight-bold label-inline">new</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1"></i></span>
<span class="navi-text">وظایف</span>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-file"></i></span>
<span class="navi-text">سفارشات</span>
</a>
</li>
</ul>
استفاده از کلاس .navi-circle-icon.
<ul class="navi navi-hover navi-active">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="symbol symbol-50 symbol-circle mr-3">
<span class="symbol-label"><i class="flaticon2-analytics text-danger"></i></span>
</span>
<span class="navi-text">پیام ها</span>
<span class="label label-light-danger font-weight-bold label-inline">new</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="symbol symbol-50 symbol-circle mr-3">
<span class="symbol-label"><i class="flaticon2-pie-chart-2 text-warning"></i></span>
</span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="symbol symbol-50 symbol-circle mr-3">
<span class="symbol-label"><i class="flaticon2-box-1 text-success"></i></span>
</span>
<span class="navi-text">وظایف</span>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="symbol symbol-50 symbol-circle mr-3">
<span class="symbol-label"><i class="flaticon2-file text-primary"></i></span>
</span>
<span class="navi-text">سفارشات</span>
</a>
</li>
</ul>
استفاده از کلاس .navi-text
<ul class="navi navi-hover navi-active">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="symbol symbol-50 mr-3">
<span class="symbol-label"><i class="flaticon2-analytics text-danger"></i></span>
</span>
<div class="navi-text">
<span class="d-block font-weight-bold">پیام ها</span>
<span class="text-muted">صندوق ورودی و اطلاعیه ها</span>
</div>
<span class="label label-light-danger font-weight-bold label-inline">new</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="symbol symbol-50 mr-3">
<span class="symbol-label"><i class="flaticon2-pie-chart-2 text-warning"></i></span>
</span>
<div class="navi-text">
<span class="d-block font-weight-bold">تنظیمات</span>
<span class="text-muted">اپلیکیشن ها & services</span>
</div>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="symbol symbol-50 mr-3">
<span class="symbol-label"><i class="flaticon2-box-1 text-success"></i></span>
</span>
<div class="navi-text">
<span class="d-block font-weight-bold">وظایف</span>
<span class="text-muted">پروژه & tasks</span>
</div>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="symbol symbol-50 mr-3">
<span class="symbol-label"><i class="flaticon2-file text-primary"></i></span>
</span>
<div class="navi-text">
<span class="d-block font-weight-bold">سفارشات</span>
<span class="text-muted">سفارشات فروشگاه</span>
</div>
</a>
</li>
</ul>
استفاده از کلاس .navi-text
<ul class="navi navi-hover navi-active">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-analytics text-danger"></i></span>
<div class="navi-text">
<span class="d-block font-weight-bold">پیام ها</span>
<span class="text-muted">صندوق ورودی و اطلاعیه ها</span>
</div>
<span class="label label-light-danger font-weight-bold label-inline">new</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-pie-chart-2 text-warning"></i></span>
<div class="navi-text">
<span class="d-block font-weight-bold">تنظیمات</span>
<span class="text-muted">اپلیکیشن ها & services</span>
</div>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1 text-success"></i></span>
<div class="navi-text">
<span class="d-block font-weight-bold">وظایف</span>
<span class="text-muted">پروژه & tasks</span>
</div>
<span class="navi-label">
<span class="label label-warning label-rounded">5</span>
</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-file text-primary"></i></span>
<div class="navi-text">
<span class="d-block font-weight-bold">سفارشات</span>
<span class="text-muted">سفارشات فروشگاه</span>
</div>
</a>
</li>
</ul>
استفاده از کلاس .navi-border برای ایجاد حاشیه
<ul class="navi navi-border">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-analytics"></i></span>
<span class="navi-text">پیام ها</span>
<span class="label label-danger label-rounded">2</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
<span class="navi-text">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-box-1"></i></span>
<span class="navi-text">وظایف</span>
<span class="label label-warning label-rounded">5</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-icon"><i class="flaticon2-file"></i></span>
<span class="navi-text">سفارشات</span>
</a>
</li>
</ul>
برای داشتن پیمایش سفارشی از ابزارهای بوت استرپ و مترونیک استفاده کنید.
<ul class="navi navi-accent navi-hover navi-bold">
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-text font-size-lg">پیام ها</span>
<span class="label label-danger label-rounded">2</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link active" href="#">
<span class="navi-text font-size-lg">تنظیمات</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-text font-size-lg">وظایف</span>
<span class="label label-warning label-rounded">5</span>
</a>
</li>
<li class="navi-item">
<a class="navi-link" href="#">
<span class="navi-text font-weight-bold font-size-lg">سفارشات</span>
</a>
</li>
</ul>
