سلام, محسن م

##### ناوبری های پیشرفته

اقدامات
`.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`.

- پیام ها 2
- تنظیمات بروزرسانی
- پروفایل جدید
- سفارشات روی خط

دراپ دان

                            <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`.

- پیام ها 2
- تنظیمات بروزرسانی
- پروفایل جدید
- سفارشات در انتظار

دراپ دان

                            <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`

- پیام ها 2
- وظایف بروزرسانی
- پروفایل جدید
- تنظیمات 3

دراپ دان

                            <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` برای گروه بندی و سکشن بندی.

- سکشن یک
- پیام ها 2
- تنظیمات
- پروفایل
- سکشن دو
- وظایف 5
- سفارشات
- گزارشات

دراپ دان

                            <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` برای جداکردن.

- پیام ها 2
- تنظیمات
- پروفایل
- وظایف 5
- سفارشات
- گزارشات

دراپ دان

                            <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`

- پیام ها 2
- تنظیمات
- پروفایل
- وظایف 5

دراپ دان

                            <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`

- پیام ها جدید
- تنظیمات
- وظایف 5
- سفارشات

دراپ دان

                            <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`.

- پیام ها جدید
- تنظیمات
- وظایف 5
- سفارشات

دراپ دان

                            <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}` .

- پیام ها جدید
- تنظیمات
- وظایف 5
- سفارشات

دراپ دان

                            <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`.

- پیام ها جدید
- تنظیمات
- وظایف 5
- سفارشات

دراپ دان

                            <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`

- پیام ها صندوق ورودی و اطلاعیه ها
  جدید
- تنظیمات اپلیکیشن ها و سرویس ها
- وظایف پروژه ها و وظایف
  5
- سفارشات سفارشات فروشگاه

دراپ دان

                            <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`

- سفارش جدید درج شده است 2 ساعت قبل
  جدید
- مشتری جدید ثبت شده است 5 ساعت قبل
- اپلیکیشن تایید شده است 2 چند روز قبل
  5
- بازخورد کاربر جدید دریافت شده است 1 هفته قبل

دراپ دان

                            <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` برای ایجاد حاشیه

- پیام ها 2
- تنظیمات
- وظایف 5
- سفارشات

دراپ دان

                            <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>

### نمونه سفارشی

برای داشتن پیمایش سفارشی از ابزارهای بوت استرپ و مترونیک استفاده کنید.

- پیام ها 2
- تنظیمات
- وظایف 5
- سفارشات

دراپ دان

                            <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>

### پروفایل کاربر 12 پیام

محسن برومند
توسعه اپلیکیشن
jm@softplus.com خروج
پروفایل من
تنظیمات اکانت بروزرسانی
پیام های من
صندوق پیام ها و کارها
فعالیت های من
لاگ ها و اعلان ها
کارهای من
اخرین کارها و پروژه ها

##### آخرین اعلان ها

اهداف دیگر موعد 2 روز
+28%
برای مردم خواهد بود موعد 2 روز
+50%
هدف این خواهد بود که ترغیب شود موعد 2 روز
-27%
بهترین محصول موعد 2 روز
+8%

#### سبد خرید

iBlender بهترین وسایل آشپزخانه در سال 2020
دلار 350 5
پاک کننده هوشمند ابزار هوشمند برای پخت و پز
650دلار 4
دوربین دوربین حرفه ای برای عکس
150دلار 3
چاپگر 4D ساخت اشیاء منحصر به فرد
دلار 1450 7
موشن ابزار انیمیشن ایده آل
650دلار 7

##### پیام های سیستم

نویسندگان برتر موفق ترین ها
+82دلار
نویسندگان محبوب موفق ترین ها
+280دلار
کاربران جدید موفق ترین ها
+4500دلار
فعال مشتریان موفق ترین ها
+4500دلار
تم پرفروش موفق ترین ها
+4500دلار

##### اعلان ها

اهداف دیگر موعد 2 روز
+28%
برای مردم خواهد بود موعد 2 روز
+50%
هدف این خواهد بود که ترغیب شود موعد 2 روز
-27%
بهترین محصول موعد 2 روز
+8%
5 گزارش تولید شده توسط کاربر جدید
گزارش ها بر اساس فروش
2 موارد جدید ارسال شد
توسط محمد رضایی
فایل های ایجاد شده
گزارش ها بر اساس فروش
دلار2900 ارزش محصولات فروخته شده
جمع آوری 234 مورد
میانگین زمان پاسخگویی 4.5 ساعت
فاستوست باری است
3 هشدارهای دفاعی
هفته گذشته 40٪ هشدار کمتری دارد
میانگین 4 پست وبلاگ برای هر نویسنده
12 بار ارسال شده است
هفته گذشته 16 نویسنده پیوستند
طراح
2 مورد جدید ارسال شده است
توسط محمد رضایی
حجم دانلودها 2 گیگ
مفاهیم بنیادی
دلار2900 ارزش محصولات فروخته شده
جمع آوری 234 مورد
7 گزارش تولید شده توسط کاربر جدید
گزارش ها بر اساس فروش
میانگین زمان پاسخگویی 4.5 ساعت
فاستوست باری است

##### مراقبت از مشتری

فعال کردن اعلان ها:
فعال کردن ردیابی:
پرتال پشتیبانی

##### گزارشات

گزارش عمومیات:
فعال سازی خروچی گزارش
اجازه جمع آوری داده ها:

##### اعضا

فعال سازی عضویت اعضا
اجازه نظر دهی
فعال کردن پرتال مشتری
محسن برومند
فعال
محسن برومند 2 ساعت
چقدر احتمال دارید که شرکت ما را توصیه کنید به دوستان و خانواده خود؟
3 دقیقه شما
سلام در آنجا ، ما فقط می نویسیم تا به شما اطلاع دهیم که در مخزن گیت هاب مشترک شده اید.
محسن برومند 40 ثانیه
باشه ، فهمیدم
همین الان شما
برای همه مشکلات اعلان دریافت خواهید کرد ، درخواستها را بکشید!
محسن برومند 40 ثانیه
شما می توانید با کلیک بر روی این مخزن بلافاصله از حالت انتخاب خارج شوید:https://github.com
همین الان شما
آموزش رو دیدم.
محسن برومند 40 ثانیه
بیشترین دوره های تجاری خریداری شده در این فروش!
همین الان شما
شرکت BBQ برای جشن گرفتن دستاوردها و اهداف سه ماهه آخر. غذا و نوشیدنی تهیه شده

#### انتخاب نسخه ی نمایشی

##### نسخه ی نمایشی 1

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 2

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 3

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 4

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 5

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 6

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 7

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 8

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 9

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 10

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 11

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 12

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 13

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 14

به زودی

##### نسخه ی نمایشی 15

به زودی

##### نسخه ی نمایشی 16

به زودی

##### نسخه ی نمایشی 17

به زودی

##### نسخه ی نمایشی 18

به زودی

##### نسخه ی نمایشی 19

به زودی

##### نسخه ی نمایشی 20

به زودی

##### نسخه ی نمایشی 21

به زودی

##### نسخه ی نمایشی 22

به زودی

##### نسخه ی نمایشی 23

به زودی

##### نسخه ی نمایشی 24

به زودی

##### نسخه ی نمایشی 25

به زودی

##### نسخه ی نمایشی 26

به زودی

##### نسخه ی نمایشی 27

به زودی

##### نسخه ی نمایشی 28

به زودی

##### نسخه ی نمایشی 29

به زودی

##### نسخه ی نمایشی 30

به زودی