Hi, Sean S

##### Advance Navs

Actions
Metronic's advance `.navi`component comes with a variety of options to provide unique looking & multi-purpose naviigations.

### Base Examples

Use `.navi`to have vertical navigations for inline and dropdown modes.

- Active
- Example Link
- Disabled
- Another Link

Dropdown example

          <div class="dropdown">
           <a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown">
            Dropdown example
           </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">Active</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">Example Link</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">Disabled</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">Another Link</span>
              </a>
             </li>
            </ul>
           </div>
          </div>

### Font Weight Options

Use `.navi`with `.navi-{light|lighter|bold|bolder|boldest}`classes to set font weight.

- Active
- Example Link
- Disabled
- Another Link

Dropdown example

          <div class="dropdown">
           <a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown">
            Dropdown example
           </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">Active</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">Example Link</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">Disabled</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">Another Link</span>
              </a>
             </li>
            </ul>
           </div>
          </div>

### Header And Footer

Use `.navi-header`and `.navi-footer`to have a header and footer.

- Jump to:
- Messages
- Support Center
- Settings
- Profile

Dropdown example

                            <ul class="navi">
                                <li class="navi-header font-weight-bold py-5">
                                    Jump to:
                                    <i class="flaticon2-information" data-toggle="tooltip" data-placement="right" title="Click to learn more..."></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">Messages</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">Settings</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">Support Center</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">Profile</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">Sign Out</a>
                                <a href="#" target="_blank" class="btn btn-clean font-weight-bold">Upgrade Plan</a>
                            </div>

### Labels

Use `.navi-label`with `.label`component to have label for navigation links.

- Messages 2
- Settings Updated
- Profile New
- Orders On hold

Dropdown example

                            <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">Messages</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">Settings</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">Profile</span>
                                  <span class="navi-label">
                                      <span class="label label-inline label-success">New</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">Orders</span>
                                  <span class="navi-label">
                                       <span class="label label-inline label-dark">On hold</span>
                                  </span>
                              </a>
                             </li>
                            </ul>

### Arrows

Use `.navi-arrow`to have navigation links with arrows.

- Messages 2
- Settings Updated
- Profile New
- Orders Pending

Dropdown example

                            <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">Messages</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">Settings</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">Profile</span>
                                        <span class="navi-label">
                                            <span class="label label-inline label-light-danger font-weight-bold">New</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">Orders</span>
                                        <span class="navi-label">
                                            <span class="label label-inline label-light-success font-weight-bold">Pending</span>
                                        </span>
                                        <span class="navi-arrow"></span>
                                    </a>
                                </li>
                            </ul>

### Bullets

Use `.navi-bullet`with `.bullet`component navi links with line and dot bullets.

- Messages 2
- Tasks Updated
- Profile New
- Settings 3

Dropdown example

                            <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">Messages</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">Tasks</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">Profile</span>
                                        <span class="navi-label">
                                            <span class="label label-inline label-success">New</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">Settings</span>
                                        <span class="navi-label">
                                            <span class="label label-rounded label-light-danger">3</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>

### Sections

Use `.navi-section`to have section for group of navi links.

- Section 1
- Messages 2
- Settings
- Profile
- Section 2
- Tasks 5
- Orders
- Reports

Dropdown example

                            <ul class="navi">
                             <li class="navi-section text-primary text-uppercase  font-weight-bolder pb-0">
                              Section 1
                             </li>
                             <li class="navi-item">
                              <a class="navi-link" href="#">
                                  <span class="navi-icon"><i class="flaticon2-analytics"></i></span>
                                  <span class="navi-text">Messages</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">Settings</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">Profile</span>
                              </a>
                             </li>
                             <li class="navi-section mt-5 text-primary text-uppercase  font-weight-bolder pb-0">
                              Section 2
                             </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">Tasks</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">Orders</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">Reports</span>
                              </a>
                             </li>
                            </ul>

### Separator

Use `.navi-separator`to have navi with separators.

- Messages 2
- Settings
- Profile
- Tasks 5
- Orders
- Reports

Dropdown example

                            <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">Messages</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">Settings</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">Profile</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">Tasks</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">Orders</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">Reports</span>
                              </a>
                             </li>
                            </ul>

### Link Hover And Active Styles

Use `.navi-hover`and `.navi-active`to have link background color for hover and active states respectively.

- Messages 2
- Settings
- Profile
- Tasks 5

Dropdown example

                            <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">Messages</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">Settings</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">Profile</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">Tasks</span>
                                        <span class="navi-label">
                                            <span class="label label-warning label-rounded">5</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>

### Link Border Radiuses

Use `.navi`with `.navi-link-rounded`, `.navi-link-rounded-lg`and `.navi-link-rounded-xl`classes to have rounded links.

- Messages new
- Settings
- Tasks 5
- Orders

Dropdown example

                            <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">Messages</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">Settings</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">Tasks</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">Orders</span>
                                    </a>
                                </li>
                            </ul>

### Accent Style

Use `.navi-accent`to have navi link active state with vertical bar ahead.

- Messages new
- Settings
- Tasks 5
- Orders

Dropdown example

                            <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">Messages</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">Settings</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">Tasks</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">Orders</span>
                                    </a>
                                </li>
                            </ul>

Use `.navi-{color}`to change color with bootstrap colors.

- Messages new
- Settings
- Tasks 5
- Orders

Dropdown example

                            <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">Messages</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">Settings</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">Tasks</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">Orders</span>
                                    </a>
                                </li>
                            </ul>

### Circle Icon Style

Use `.navi-circle-icon`to have navi link active state with vertical bar ahead.

- Messages new
- Settings
- Tasks 5
- Orders

Dropdown example

                            <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">Messages</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">Settings</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">Tasks</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">Orders</span>
                                    </a>
                                </li>
                            </ul>

### Title & Description

Add custom tags in `.navi-text`to have link with title and description.

- Messages Inbox and notifications
  new
- Settings Applications & services
- Tasks Project & tasks
  5
- Orders eCommernce orders

Dropdown example

                            <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">Messages</span>
                                            <span class="text-muted">Inbox and notifications</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">Settings</span>
                                            <span class="text-muted">Applications & 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">Tasks</span>
                                            <span class="text-muted">Project & 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">Orders</span>
                                            <span class="text-muted">eCommernce orders</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>

### Notification Style

Add custom tags in `.navi-text`to have link with title and description.

- New order has been placed 2 hrs ago
  new
- New customer has been registered 5 hrs ago
- Application has been approved 2 days ago
  5
- New user feedback has been received 1 week ago

Dropdown example

                            <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">Messages</span>
                                            <span class="text-muted">Inbox and notifications</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">Settings</span>
                                            <span class="text-muted">Applications & 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">Tasks</span>
                                            <span class="text-muted">Project & 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">Orders</span>
                                            <span class="text-muted">eCommernce orders</span>
                                        </div>
                                    </a>
                                </li>
                            </ul>

### Border Style

Use `.navi-border`to have navigation links with border.

- Messages 2
- Settings
- Tasks 5
- Orders

Dropdown example

                            <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">Messages</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">Settings</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">Tasks</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">Orders</span>
                                    </a>
                                </li>
                            </ul>

### Custom Examples

Use Bootstrap and Metronic utilities to have custom navigation.

- Messages 2
- Settings
- Tasks 5
- Orders

Dropdown example

                            <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">Messages</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">Settings</span>
                                    </a>
                                </li>
                                <li class="navi-item">
                                    <a class="navi-link" href="#">
                                        <span class="navi-text font-size-lg">Tasks</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">Orders</span>
                                    </a>
                                </li>
                            </ul>

### User Profile 12 messages

James Jones
Application Developer
jm@softplus.com Sign Out
My Profile
Account settings and more update
My Messages
Inbox and tasks
My Activities
Logs and notifications
My Tasks
latest tasks and projects

##### Recent Notifications

Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
Purpose would be to persuade Due in 2 Days
-27%
The best product Due in 2 Days
+8%

#### Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

##### System Messages

Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$

##### Notifications

Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
Purpose would be to persuade Due in 2 Days
-27%
The best product Due in 2 Days
+8%
5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry

##### Customer Care

Enable Notifications:
Enable Case Tracking:
Support Portal:

##### Reports

Generate Reports:
Enable Report Export:
Allow Data Collection:

##### Memebers

Enable Member singup:
Allow User Feedbacks:
Enable Customer Portal:
Matt Pears
Active
Matt Pears 2 Hours
How likely are you to recommend our company to your friends and family?
3 minutes You
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Matt Pears 40 seconds
Ok, Understood!
Just now You
You’ll receive notifications for all issues, pull requests!
Matt Pears 40 seconds
You can unwatch this repository immediately by clicking here: https://github.com
Just now You
Discover what students who viewed Learn Figma - UI/UX Design. Essential Training also viewed
Matt Pears 40 seconds
Most purchased Business courses during this sale!
Just now You
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided

#### Select A Demo

##### Demo 1

Default RTL Version

##### Demo 2

Default RTL Version

##### Demo 3

Default RTL Version

##### Demo 4

Default RTL Version

##### Demo 5

Default RTL Version

##### Demo 6

Default RTL Version

##### Demo 7

Default RTL Version

##### Demo 8

Default RTL Version

##### Demo 9

Default RTL Version

##### Demo 10

Default RTL Version

##### Demo 11

Default RTL Version

##### Demo 12

Default RTL Version

##### Demo 13

Default RTL Version

##### Demo 14

Coming soon

##### Demo 15

Coming soon

##### Demo 16

Coming soon

##### Demo 17

Coming soon

##### Demo 18

Coming soon

##### Demo 19

Coming soon

##### Demo 20

Coming soon

##### Demo 21

Coming soon

##### Demo 22

Coming soon

##### Demo 23

Coming soon

##### Demo 24

Coming soon

##### Demo 25

Coming soon

##### Demo 26

Coming soon

##### Demo 27

Coming soon

##### Demo 28

Coming soon

##### Demo 29

Coming soon

##### Demo 30

Coming soon