Foehn Design System

Nav Side 

<nav class="vd-nav-side mb-3">
    <h2 class="sr-only">Navigation secondaire</h2>
    <ul class="nav flex-column">

        <li class="nav-item">
            <a class="nav-link active  " href="http://www.sadsdasdasd.com" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"><span class="sr-only">Vous êtes ici: </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit
            </a>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link" href="#" title="Nunc tempor orci eget pretium tristique">Nunc tempor orci eget pretium tristique
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" title="Praesent nec tellus porta, faucibus tellus eget, vulputate sapien">Praesent nec tellus porta, faucibus tellus eget, vulputate sapien
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" title="Praesent nec augue ac ipsum fringilla eleifend">Praesent nec augue ac ipsum fringilla eleifend
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#" title="Donec elementum velit a feugiat pellentesque"><span class="sr-only">Vous êtes ici: </span>Donec elementum velit a feugiat pellentesque
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" title="Vivamus non elit rutrum, pulvinar nisl vitae, elementum magna">Vivamus non elit rutrum, pulvinar nisl vitae, elementum magna
                    </a>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#" title="Nunc tempor orci eget pretium tristique" }>Nunc tempor orci eget pretium tristique
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" title="Praesent nec tellus porta, faucibus tellus eget, vulputate sapien" }>Praesent nec tellus porta, faucibus tellus eget, vulputate sapien
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" title="Praesent nec augue ac ipsum fringilla eleifend" }>Praesent nec augue ac ipsum fringilla eleifend
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" title="Sed non ex condimentum, aliquam leo non, hendrerit diam">Sed non ex condimentum, aliquam leo non, hendrerit diam
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" title="In semper nibh sed neque dapibus ultricies">In semper nibh sed neque dapibus ultricies
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
 
<nav class="vd-nav-side mb-3">
  <h2 class="sr-only">Navigation secondaire</h2>
  <ul class="nav flex-column">
    {% for item in items %}
    <li class="nav-item">
      <a class="nav-link{% if item.active %} active{% endif %}  {% if item.first %} h4 mt-0{% endif %}"
         href="{{ item.url }}"{% if item.title %}
         title="{{ item.title }}"{% endif %} >
         {%- if item.active -%}
         <span class="sr-only">Vous êtes ici: </span>
         {%- endif -%}
         {{ item.name }}
      </a>
      {%- if item.items %}
        <ul class="nav flex-column">
          {% for item in item.items -%}
          <li class="nav-item">
            <a class="nav-link{% if item.active %} active{% endif %}"
               href="{{ item.url }}"{% if item.title %}
               title="{{ item.title }}"{% endif %}>
              {%- if item.active -%}
              <span class="sr-only">Vous êtes ici: </span>
              {%- endif -%}
              {{ item.name }}
            </a>
            {%- if item.items %}
            <ul class="nav flex-column">
              {% for item in item.items -%}
              <li class="nav-item">
                <a class="nav-link{% if item.active %} active{% endif %}"
                   href="{{ item.url }}"
                   {% if item.title %} title="{{ item.title }}"}{% endif %}>
                {%- if item.active -%}
                <span class="sr-only">Vous êtes ici: </span>
                {%- endif -%}
                {{ item.name }}
                </a>
              </li>
              {%- endfor %}
            </ul>
            {%- endif %}
          </li>
          {%- endfor %}
        </ul>
      {%- endif %}
    </li>
    {%- endfor %}
  </ul>
</nav>
 
{
  "items": [
    {
      "name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "url": "http://www.sadsdasdasd.com",
      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "active": true,
      "items": [
        {
          "name": "Nunc tempor orci eget pretium tristique",
          "url": "#",
          "title": "Nunc tempor orci eget pretium tristique",
          "active": false
        },
        {
          "name": "Praesent nec tellus porta, faucibus tellus eget, vulputate sapien",
          "url": "#",
          "title": "Praesent nec tellus porta, faucibus tellus eget, vulputate sapien",
          "active": false
        },
        {
          "name": "Praesent nec augue ac ipsum fringilla eleifend",
          "url": "#",
          "title": "Praesent nec augue ac ipsum fringilla eleifend",
          "active": false
        },
        {
          "name": "Donec elementum velit a feugiat pellentesque",
          "url": "#",
          "title": "Donec elementum velit a feugiat pellentesque",
          "active": true
        },
        {
          "name": "Vivamus non elit rutrum, pulvinar nisl vitae, elementum magna",
          "url": "#",
          "title": "Vivamus non elit rutrum, pulvinar nisl vitae, elementum magna",
          "active": false,
          "items": [
            {
              "name": "Nunc tempor orci eget pretium tristique",
              "url": "#",
              "title": "Nunc tempor orci eget pretium tristique",
              "active": false
            },
            {
              "name": "Praesent nec tellus porta, faucibus tellus eget, vulputate sapien",
              "url": "#",
              "title": "Praesent nec tellus porta, faucibus tellus eget, vulputate sapien",
              "active": false
            },
            {
              "name": "Praesent nec augue ac ipsum fringilla eleifend",
              "url": "#",
              "title": "Praesent nec augue ac ipsum fringilla eleifend",
              "active": false
            }
          ]
        },
        {
          "name": "Sed non ex condimentum, aliquam leo non, hendrerit diam",
          "url": "#",
          "title": "Sed non ex condimentum, aliquam leo non, hendrerit diam",
          "active": false
        },
        {
          "name": "In semper nibh sed neque dapibus ultricies",
          "url": "#",
          "title": "In semper nibh sed neque dapibus ultricies",
          "active": false
        }
      ]
    }
  ]
}
  • Content: 
    @charset "UTF-8";

/**
 * Nav-side style
 *
 * 1. The first element of the nav have to look like a headings
 * 2. Every list element has a separator
 * 3. Add a separator at the top of the first element. Because `ul` are inside
 *    `li`
 * 4. Starting at the third level of list, there's a padding on the left.
 *
 * A note for futur me: Sorry for that. Bad design makes me doing bad CSS with
 *                      lot of specificities.
 */
.vd-nav-side {
  > ul > li:first-child > a {
    font-size: $h4-font-size; /* [1] */
    font-family: $font-family-serif; /* [1] */
    font-weight: $headings-font-weight; /* [1] */
    color: $black; /* [1] */
    text-decoration: none; /* [1] */

    &:hover {
      text-decoration: underline; /* [1] */
    }
  }

  .nav-link {
    border-bottom: 1px solid $vd-neutral-light; /* [2] */

    &.active {
      font-weight: bold;
    }
  }

  .nav:first-child .nav-link {
    border-top: 1px solod $vd-neutral-light; /* [3] */
  }

  > ul ul ul {
    padding-left: $spacer; /* [3] */
  }
}
  • URL: /components/raw/nav-side/_nav-side.scss
  • Filesystem Path: src/components/02-molecules/navigation/nav-side/_nav-side.scss
  • Size: 1 KB

No notes defined.