---
title: Nav
---

{{#extend "layout-default"}}


  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header">
        <h1 class="page-title">Nav</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item active">Structure</li>
        </ol>
        <div class="page-header-actions">
          <form>
            <div class="input-search input-search-dark">
              <i class="input-search-icon md-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="" placeholder="Search...">
            </div>
          </form>
        </div>
      </div>

      <div class="page-content container-fluid">
        <!-- Panel -->
        <div class="panel">
          <div class="panel-body">
            <div class="row row-lg">
              <div class="col-md-6">
                <!-- Example Pills -->
                <div class="example-wrap">
                  <h4 class="example-title">Pills</h4>
                  <div class="example">
                    <ul class="nav nav-pills">
                      <li class="nav-item" role="presentation"><a class="nav-link active" href="javascript:void(0)">Home</a></li>
                      <li class="nav-item" role="presentation"><a class="nav-link" href="javascript:void(0)">Profile</a></li>
                      <li class="nav-item" role="presentation"><a class="nav-link disabled" href="javascript:void(0)">Messages</a></li>
                    </ul>
                  </div>
                </div>
                <!-- End Example Pills -->
              </div>

              <div class="col-md-6">
                <!-- Example Iconified Pills -->
                <div class="example-wrap">
                  <h4 class="example-title">Iconified Pills</h4>
                  <div class="example">
                    <ul class="nav nav-pills">
                      <li class="nav-item" role="presentation"><a class="nav-link active" href="javascript:void(0)"><i class="icon md-home" aria-hidden="true"></i> Home</a></li>
                      <li class="nav-item" role="presentation"><a class="nav-link" href="javascript:void(0)"><i class="icon md-account" aria-hidden="true"></i> Profile</a></li>
                      <li class="nav-item" role="presentation"><a class="nav-link disabled" href="javascript:void(0)"><i class="icon md-comment" aria-hidden="true"></i> Messages</a></li>
                    </ul>
                  </div>
                </div>
                <!-- End Example Iconified Pills -->
              </div>

              <div class="col-md-6">
                <!-- Example Pills -->
                <div class="example-wrap m-sm-0">
                  <h4 class="example-title">Stacked Pills</h4>
                  <div class="example">
                    <ul class="nav nav-pills flex-column">
                      <li class="nav-item" role="presentation"><a class="nav-link active" href="javascript:void(0)"><i class="icon md-home" aria-hidden="true"></i> Home</a></li>
                      <li class="nav-item" role="presentation"><a class="nav-link" href="javascript:void(0)"><i class="icon md-account" aria-hidden="true"></i> Profile</a></li>
                      <li class="nav-item" role="presentation"><a class="nav-link disabled" href="javascript:void(0)"><i class="icon md-comment" aria-hidden="true"></i> Messages</a></li>
                    </ul>
                  </div>
                </div>
                <!-- End Example Stacked Pills -->
              </div>


              <div class="col-md-6">
                <!-- Example Pills With Dropdowns -->
                <div class="example-wrap">
                  <h4 class="example-title">Pills With Dropdowns</h4>
                  <div class="example">
                    <ul class="nav nav-pills">
                      <li class="nav-item" role="presentation"><a class="nav-link active" href="javascript:void(0)"><i class="icon md-home" aria-hidden="true"></i> Home</a></li>
                      <li class="nav-item" role="presentation"><a class="nav-link" href="javascript:void(0)"><i class="icon md-help" aria-hidden="true"></i> Help</a></li>
                      <li class="nav-item dropdown" role="presentation">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                          role="button">
                      <i class="icon md-wrench" aria-hidden="true"></i> Dropdown</span>
                    </a>
                        <div class="dropdown-menu" role="menu">
                          <a class="dropdown-item" href="javascript:void(0)" role="menuitem">Action</a>
                          <a class="dropdown-item" href="javascript:void(0)" role="menuitem">Another action</a>
                          <a class="dropdown-item" href="javascript:void(0)" role="menuitem">Something else here</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="javascript:void(0)" role="menuitem">Separated link</a>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- End Example Pills With Dropdowns -->
              </div>

            </div>
          </div>
        </div>
        <!-- End Panel -->

        <!-- Panel -->
        <div class="panel">
          <div class="panel-body">
            <div class="row row-lg">

              <div class="col-xl-6">
                <!-- Example Nav Tabs -->
                <div class="example-wrap">
                  <h4 class="example-title">Nav Tabs</h4>
                  <div class="example">
                    <ul class="nav nav-tabs">
                      <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="javascript:void(0)">Home</a></li>
                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Components</a></li>
                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Css</a></li>
                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Javascript</a></li>
                    </ul>
                  </div>
                </div>
                <!-- End Example Nav Tabs -->
              </div>

              <div class="col-xl-6">
                <!-- Example Nav Tabs Line -->
                <div class="example-wrap">
                  <h4 class="example-title">Nav Tabs Line</h4>
                  <div class="example">
                    <ul class="nav nav-tabs nav-tabs-line">
                      <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="javascript:void(0)">Home</a></li>
                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Components</a></li>
                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Css</a></li>
                      <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Javascript</a></li>
                    </ul>
                  </div>
                </div>
                <!-- End Example Nav Tabs Line -->
              </div>

              <div class="col-md-6">
                <!-- Example Nav Tabs Vertical -->
                <div class="example-wrap m-lg-0">
                  <h4 class="example-title">Nav Tabs Vertical</h4>
                  <div class="example">
                    <div class="nav-tabs-vertical">
                      <ul class="nav nav-tabs">
                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="javascript:void(0)">Home</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Components</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Css</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Javascript</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <!-- End Example Nav Tabs Vertical -->
              </div>

              <div class="col-md-6">
                <!-- Example Nav Tabs Line Vertical -->
                <div class="example-wrap">
                  <h4 class="example-title">Nav Tabs Line Vertical</h4>
                  <div class="example">
                    <div class="nav-tabs-vertical">
                      <ul class="nav nav-tabs nav-tabs-line">
                        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="javascript:void(0)">Home</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Components</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Css</a></li>
                        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="javascript:void(0)">Javascript</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
                <!-- End Example Nav Tabs Line Vertical -->
              </div>

            </div>
          </div>
        </div>
        <!-- End Panel -->


        <!-- Quick Menu -->
        <div class="example-wrap">
          <h4 class="example-title">Quick Menu</h4>
          <!-- Example Quick Menu Small -->
          <div class="example">
            <ul class="nav-quick nav-quick-sm row">
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-settings" aria-hidden="true"></i>
              Settings
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-account" aria-hidden="true"></i>
              User list
              <span class="badge badge-success">8</span>
              </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-wrench" aria-hidden="true"></i>
              Admin tools
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-upload" aria-hidden="true"></i>
              Upload
              <span class="badge badge-danger">13</span>
              </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-lock" aria-hidden="true"></i>
              Lock
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-search" aria-hidden="true"></i>
              Search
            </a>
              </li>
            </ul>
          </div>
          <!-- End Example Quick Menu Small -->

          <!-- Example Quick Menu -->
          <div class="example">
            <ul class="nav-quick row">
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-settings" aria-hidden="true"></i>
              Settings
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-account" aria-hidden="true"></i>
              User list
              <span class="badge badge-success">8</span>
              </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-wrench" aria-hidden="true"></i>
              Admin tools
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-upload" aria-hidden="true"></i>
              Upload
              <span class="badge badge-danger">13</span>
              </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-lock" aria-hidden="true"></i>
              Lock
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-search" aria-hidden="true"></i>
              Search
            </a>
              </li>
            </ul>
          </div>
          <!-- End Example Quick Menu -->
          <!-- Example Quick Menu Large -->
          <div class="example">
            <ul class="nav-quick nav-quick-lg row">
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-settings" aria-hidden="true"></i>
              Settings
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-account" aria-hidden="true"></i>
              User list
              <span class="badge badge-success">8</span>
              </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-wrench" aria-hidden="true"></i>
              Admin tools
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-upload" aria-hidden="true"></i>
              Upload
              <span class="badge badge-danger">13</span>
              </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-lock" aria-hidden="true"></i>
              Lock
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-search" aria-hidden="true"></i>
              Search
            </a>
              </li>
            </ul>
          </div>
          <!-- End Example Quick Menu Large -->

          <!-- Example Quick Menu Bordered -->
          <div class="example">
            <ul class="nav-quick nav-quick-bordered row">
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-settings" aria-hidden="true"></i>
              Settings
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-account" aria-hidden="true"></i>
              User list
              <span class="badge badge-success">8</span>
              </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-wrench" aria-hidden="true"></i>
              Admin tools
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-upload" aria-hidden="true"></i>
              Upload
              <span class="badge badge-danger">13</span>
              </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-lock" aria-hidden="true"></i>
              Lock
            </a>
              </li>
              <li class="nav-item col-md-2 col-4">
                <a class="nav-link" href="javascript:void(0)">
              <i class="icon md-search" aria-hidden="true"></i>
              Search
            </a>
              </li>
            </ul>
          </div>
          <!-- End Example Quick Menu Bordered -->
        </div>
        <!-- End Quick Menu -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}