<ul>
    <li>
        <h2>Getting Started</h2>
        <ul>
            <li>
                <a href="{{ '/' | url }}">Home</a>
            </li>
            <li>
                <a href="{{ '/getting-started/installation' | url }}">Installation</a>
            </li>
            <li>
                <a href="{{ '/getting-started/usage' | url }}">Usage</a>
            </li>
            <li>
                <a href="{{ '/getting-started/themes' | url }}">Themes</a>
            </li>
            <li>
                <a href="{{ '/getting-started/customizing' | url }}">Customizing</a>
            </li>
        </ul>
    </li>
    <li>
        <h2>Frameworks</h2>
        <ul>
            <li>
                <a href="{{ '/frameworks/react' | url }}">React</a>
            </li>
            <li>
                <a href="{{ '/frameworks/vue' | url }}">Vue</a>
            </li>
            <li>
                <a href="{{ '/frameworks/angular' | url }}">Angular</a>
            </li>
        </ul>
    </li>
    <li>
        <h2>Components</h2>
        <ul>
            {% for component in meta.components %}
                <li>
                    <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
                        {{ component.name | classNameToComponentName }}
                    </a>
                </li>
            {% endfor %}
        </ul>
    </li>
</ul>