We are living as nomad in Mexico !!

Directory

This is a directory design template.

Example

HTML

<nav class="directory">
  <ul class="list">
    <li class="item heading">
      <a class="link" href="">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#home"></use></svg>
        <p class="content">LINK</p>
      </a>
    </li>
    <li class="item heading drop-down active">
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#home"></use></svg>
      <p class="content">TITLE</p>
      <svg class="icon rotate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#arrowDown"></use></svg>
    </li>
    <li class="item" style="max-height: 189.562px;">
      <ul class="sub-list">
        <li class="item">
          <a class="link" href="">
            <p class="content">LINK<small class="color-muted font-size-x-small margin-left-x-small">TAG</small></p>
          </a>
        </li>
        <li class="item">
          <a class="content link" href="">LINK</a>
        </li>
        <li class="item drop-down active">
          <p class="content">TITLE</p>
          <svg class="icon rotate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#arrowDown"></use></svg>
        </li>
        <li class="item" style="max-height: 94.7812px;">
          <ul class="sub-list">
            <li class="item">
              <a class="content link" href="">LINK</a>
            </li>
            <li class="item">
              <p class="content">TITLE</p>
            </li>
            <li class="item">
              <ul class="sub-list">
                <li class="item">
                  <a class="content link" href="">LINK</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="item heading">
      <a class="link" href="">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><use xlink:href="/img/icon/icons.svg#home"></use></svg>
        <span class="content">LINK</span>
      </a>
    </li>
  </ul>
</nav>

Install

npm

Console 
> npm i @noknow/web-design-directory

Import

CSS 
@import '/YOUR_PROJECT/node_modules/@noknow/web-design-directory/style.css';

JavaScript 
import { Directory } from '/YOUR_PROJECT/node_modules/@noknow/web-design-directory/index.js';