[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Basic Navigation

Navigation share general markup and styles, from the base .nav class to the active and disabled states.

###### Basic Navigation

Below is an example of a basic navigation for both light and dark.

Source Code

    <div class="pd-10 bd rounded">
      <ul class="nav flex-column flex-sm-row" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Features</a></li>
        <!-- more menu here -->
      </ul>
    </div><!-- pd-10 -->

###### Vertical Navigation

Below is an example of a basic navigation in a vertical mode.

Source Code

    <div class="pd-10 bd bd-white-1 rounded">
      <ul class="nav nav-gray-600 flex-column" role="tablist">...</ul>
    </div><!-- pd-10 -->

###### Default Pills Navigation

Below is an example of a pill navigation in both light and dark.

Source Code

    <div class="pd-10 bd rounded">
      <ul class="nav nav-pills flex-column flex-md-row" role="tablist">...</ul>
    </div><!-- pd-10 -->

###### Vertical Pills Navigation

Below is an example of a pill navigation in vertical mode.

Source Code

    <div class="pd-10 bd bd-white-1 rounded">
      <ul class="nav nav-pills flex-column" role="tablist">...</ul>
    </div><!-- pd-10 -->

###### Horizontal Alignment

A navigation with center and right in which left is the default.

Source Code

    <div class="pd-10 bd bd-white-1 rounded">
      <ul class="nav nav-pills flex-column flex-md-row justify-content-center" role="tablist">...</ul>
    </div><!-- pd-10 -->

    <div class="pd-10 bd bd-white-1 rounded">
    <ul class="nav nav-pills flex-column flex-md-row justify-content-end" role="tablist">...</ul>
    </div><!-- pd-10 -->

###### Colored Bar Variations

A navigation with colored bar that wrapped the navigation.

Source Code

    <div class="pd-10 bg-teal rounded">
      <ul class="nav nav-colored-bg flex-column flex-md-row" role="tablist">...</ul>
    </div><!-- pd-10 -->

Class Reference

Class | Value
--- | ---
`class="pd-10 bg-[value] rounded"` | primary | success | warning | danger | info | teal | indigo | purple | pink | dark

###### Gradient Bar Variations

A navigation with gradient color bar that wrapped the navigation.

Source Code

    <div class="pd-10 bg-mantle rounded">
      <ul class="nav nav-colored-bg flex-column flex-md-row" role="tablist">...</ul>
    </div><!-- pd-10 -->

Class Reference

Class | Value
--- | ---
`class="pd-10 bg-[value] rounded"` | mantle | reef | transfile | neon | delicate | emerald | mojito | dance | teal-love | crystal-clear | grandeur | flickr | royal | firewatch

###### Outline Navigation

Below is a type of navigation that have a line at the bottom of active link.

Source Code

    <div class="pd-10 bg-gray-200 rounded">
      <ul class="nav nav-outline flex-column flex-md-row" role="tablist">...</ul>
    </div><!-- pd-10 -->

    <div class="pd-10 bg-dark rounded">
      <ul class="nav nav-outline nav-outline-for-dark flex-column flex-md-row" role="tablist">...</ul>
    </div><!-- pd-10 -->

###### Colored Active Outline Navigation

Below is a type of navigation that have a line at the bottom of active link.

Source Code

    <div class="pd-10 bg-gray-200 rounded">
      <ul class="nav nav-outline active-info flex-column flex-md-row" role="tablist">...</ul>
    </div><!-- pd-10 -->

Class Reference

Class | Value
--- | ---
`class="nav nav-outline active-[value]"` | primary | success | warning | danger | info | indigo | orange | purple | teal | pink