Indigo Design System v1.0.1

Side Nav Work In Progress

Overview

<ul class="indi-side-nav">
    <li class="indi-side-nav__item">
        <span class="indi-side-nav__label
                
                 indi-side-nav__label--heading
                "> Heading Without Link </span>
    </li>
    <li class="indi-side-nav__item">
        <a href="#" class="indi-side-nav__label
                 indi-side-nav__label--link
                 indi-side-nav__label--heading
                "> Heading With Link </a>
    </li>
    <li class="indi-side-nav__item">
        <a href="#" class="indi-side-nav__label
                 indi-side-nav__label--link
                
                "> Side Nav Link 1 </a>
    </li>
    <li class="indi-side-nav__item">
        <a href="#" class="indi-side-nav__label
                 indi-side-nav__label--link
                
                 indi-side-nav__label--link-is-active"> Side Nav Link 2 </a>
    </li>
    <li class="indi-side-nav__item">
        <a href="#" target="_blank" class="indi-side-nav__label
                 indi-side-nav__label--link
                
                ">
            <svg class="indi-icon indi-icon--xsmall" aria-labelledby="title">
                <title>external-link</title>
                <use xlink:href="/assets/icons/indi_icons.svg#external-link">
            </svg> Side Nav Link 3 </a>
    </li>
</ul>