# Sidebar Navigation

## Screenshot

![](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV06quNBqWgzNXJZh2%2Fsn-1.png?generation=1535988004059123\&alt=media)

## One Level

```
<ul class="ol-side-navigation">
  <li>
      <a href="#">level 1</a>
  </li>

  <li class="current-menu-item">
      <a href="#">level 1</a>
  </li>

   ...
</ul>
```

**Notes**

* add `.ol-side-navigation` to a simple list with anchor links
* one `<li>` item can be the current menu item which recieves `.current-menu-item` class

## Adding Second level

```
<li class="menu-item-has-children">
  <a href="#">level 1</a>
  <ul class="sub-menu">
    <li><a href="#">level 2</a></li>
    <li><a href="#">level 2</a></li>
    <li><a href="#">level 2</a></li>
  </ul>
</li>
```

**Notes**

* add `.menu-item-has-children` class to the `<li>`
* add a `<ul>` with `.sub-menu` class
* The submenu who contains the `.current-menu-item` will recieve `.current-menu-parent`

## Adding Third level

Adding 3'rd levele menu is just like the second menu

## Toggle

It is represented by `.toggle-free` class added to `.ol-side-navigation`

## Skins

* Default : Theme color
* Red : `.red-skin` class
* Green : `.green-skin` class
* Cyan : `.cyan-skin` class
* Yellow : `.yellow-skin` class
* Dark : `.dark-skin` class
* Blue : `.blue-skin` class
