<nav-group>
<h5 class="nav-group-title">Favorites</h5>
<nav-item class="active">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="100%" height="100%"><path style="fill: #676767;" d="M 20 20 L 20 12 L 22 12 L 12 3 L 2 12 L 4 12 L 4 20 C 4 20.601563 4.398438 21 5 21 L 10 21 L 10 14 L 14 14 L 14 21 L 19 21 C 19.601563 21 20 20.601563 20 20 Z "></path></svg>
</div>
connors
</nav-item>
<nav-item>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="100%" height="100%"><path style="fill: #676767;" d="M25.983,13.342C25.988,13.228,26,13.116,26,13c0-4.418-3.582-8-8-8c-3.11,0-5.8,1.779-7.123,4.371 C10.296,9.136,9.665,9,9,9c-2.53,0-4.599,1.885-4.932,4.324C1.703,14.129,0,16.363,0,19c0,3.314,2.686,6,6,6h18 c3.314,0,6-2.686,6-6C30,16.382,28.321,14.162,25.983,13.342z M18.707,18.707l-3,3C15.512,21.902,15.256,22,15,22 s-0.512-0.098-0.707-0.293l-3-3c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0L14,18.586V13c0-0.552,0.447-1,1-1 s1,0.448,1,1v5.586l1.293-1.293c0.391-0.391,1.023-0.391,1.414,0S19.098,18.316,18.707,18.707z"></path></svg>
</div>
Downloads
</nav-item>
<nav-item>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="100%" height="100%"><path style="fill: #676767;" d="M 4 3 C 2.895 3 2 3.895 2 5 L 2 8 L 13 8 L 28 8 L 28 7 C 28 5.895 27.105 5 26 5 L 11.199219 5 L 10.582031 3.9707031 C 10.221031 3.3687031 9.5701875 3 8.8671875 3 L 4 3 z M 3 10 C 2.448 10 2 10.448 2 11 L 2 23 C 2 24.105 2.895 25 4 25 L 26 25 C 27.105 25 28 24.105 28 23 L 28 11 C 28 10.448 27.552 10 27 10 L 3 10 z"></path></svg>
</div>
Documents
</nav-item>
<nav-item>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" version="1.1" width="100%" height="100%"><path style="fill: #676767;" d="M 12 3 C 7.546875 3 3.398438 4.707031 0.40625 7.59375 L 1.78125 9.03125 C 4.390625 6.515625 8.054688 5 12 5 C 15.945313 5 19.492188 6.492188 22.21875 9.03125 L 23.59375 7.5625 C 20.519531 4.699219 16.453125 3 12 3 Z M 12 8 C 8.847656 8 5.988281 9.214844 3.8125 11.28125 L 5.1875 12.71875 C 7.011719 10.984375 9.351563 10 12 10 C 14.625 10 17 11.089844 18.84375 12.75 L 20.15625 11.25 C 18 9.308594 15.175781 8 12 8 Z M 12 13 C 10.148438 13 8.484375 13.726563 7.21875 14.875 L 8.5625 16.34375 C 9.496094 15.492188 10.648438 15 12 15 C 13.351563 15 14.503906 15.492188 15.4375 16.34375 L 16.78125 14.875 C 15.515625 13.726563 13.851563 13 12 13 Z M 12 18 C 11.5 18 10.992188 18.199219 10.59375 18.5 L 12 20 L 13.40625 18.5 C 13.007813 18.199219 12.5 18 12 18 Z "></path></svg>
</div>
AirPlay
</nav-item>
<nav-item>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 26 26" version="1.1" width="100%" height="100%"><path style="fill: #676767;" d="M 5.125 1.09375 C 5.125 1.09375 9.15625 2.09375 11.78125 4.84375 C 13.9375 7.105469 14.078125 8.40625 13.3125 9.15625 L 12.34375 10.125 L 15.875 13.65625 L 17.71875 11.8125 C 17.820313 11.914063 18.304688 12.363281 18.9375 13 C 19.375 13.4375 19.28125 14.285156 19.125 14.59375 C 19.03125 14.78125 19.125 15.09375 19.125 15.09375 L 21.09375 17.0625 C 21.484375 17.453125 22.140625 17.453125 22.53125 17.0625 L 25.625 13.9375 C 26.015625 13.546875 26.011719 12.921875 25.625 12.53125 L 23.6875 10.5625 C 23.6875 10.5625 23.390625 10.429688 23.25 10.5 C 22.941406 10.65625 22.035156 10.753906 21.59375 10.3125 C 21.011719 9.730469 20.515625 9.234375 20.40625 9.125 L 20.625 8.90625 C 20.910156 8.621094 20.976563 8.199219 20.84375 7.84375 C 20.839844 7.835938 20.847656 7.820313 20.84375 7.8125 C 20.796875 7.691406 20.722656 7.597656 20.625 7.5 L 18.5 5.375 C 17.335938 4.210938 16.28125 3.15625 16 2.875 C 14.238281 1.109375 5.125 1.09375 5.125 1.09375 Z M 11 11.46875 L 0.3125 22.15625 C -0.078125 22.546875 -0.078125 23.171875 0.3125 23.5625 L 2.4375 25.6875 C 2.828125 26.078125 3.453125 26.078125 3.84375 25.6875 L 14.53125 15 Z "></path></svg>
</div>
Applications
</nav-item>
<nav-item>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1" width="100%" height="100%"><path style="fill: #676767;" d="M 36.0625 0 C 35.125 0 34.140625 0.550781 33.40625 1.5 L 25.125 13.125 C 23.933594 12.84375 22.726563 12.71875 21.5 12.71875 C 17.289063 12.71875 13.320313 14.367188 10.34375 17.34375 C 10.15625 17.53125 10.0625 17.765625 10.0625 18.03125 C 10.0625 18.296875 10.15625 18.5625 10.34375 18.75 L 31.25 39.65625 C 31.445313 39.851563 31.679688 39.9375 31.9375 39.9375 C 32.195313 39.9375 32.460938 39.820313 32.65625 39.625 C 36.589844 35.695313 38.152344 30.023438 36.8125 24.65625 L 48.5 16.6875 C 49.375 16.035156 49.933594 15.140625 50 14.25 C 50.050781 13.597656 49.8125 12.972656 49.375 12.53125 L 37.625 0.625 C 37.222656 0.214844 36.660156 0 36.0625 0 Z M 16.53125 27.75 L 0.21875 48.375 C -0.0976563 48.773438 -0.078125 49.359375 0.28125 49.71875 C 0.476563 49.914063 0.742188 50 1 50 C 1.21875 50 1.441406 49.925781 1.625 49.78125 L 22.21875 33.46875 Z "></path></svg>
</div>
Desktop
</nav-item>
</nav-group>
To make a navigation group looking nice, use it within a pane-sm sidebar
pane ;-)
<div class="pane-group">
<div class="pane-sm sidebar">
<!--Navigation group here-->
</div>
<div class="pane">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>