{% raw %}
{% extends "mote/element/index.html" %}
{% load mote_tags %}

{% mask element.json.data.Button as "button" %}

{% block codeblock %}
<div class="sg-code-block">
    <h4 class="title">
        Navigation
    </h4>
    <div class="description">
        The navigation menu is located in the footer, so when the user taps the Menu link in the header they jump down to the bottom of the page.
    </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
{% render_element element %}
                </xmp>
            </code>
        </pre>
    </div>
    <!-- code-example -->
</div>
<div class="sg-code-block">
  <h4 class="title">
      Navigation
  </h4>
  <div class="description">
      The navigation menu is located in the footer, so when the user taps the Menu link in the header they jump down to the bottom of the page.
  </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
{% render_element element.aspect.components.navigation.navigation-general %}
                </xmp>
            </code>
        </pre>
    </div>
    <!-- code-example -->
</div>
<!-- sg-code-block -->
<div class="sg-code-block">
  <h4 class="title">
      Navigation
  </h4>
  <div class="description">
      The navigation menu is located in the footer, so when the user taps the Menu link in the header they jump down to the bottom of the page.
  </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
{% render_element element.aspect.components.navigation.navigation-vertical %}
                </xmp>
            </code>
        </pre>
    </div>
    <!-- code-example -->
</div>
<!-- sg-code-block -->
<div class="sg-code-block">
  <h4 class="title">
      Navigation
  </h4>
  <div class="description">
      The navigation menu is located in the footer, so when the user taps the Menu link in the header they jump down to the bottom of the page.
  </div>
    <div class="code-example">
        <pre>
            <code class="language-markup">
                <xmp>
{% render_element element.aspect.components.navigation.navigation-column %}
                </xmp>
            </code>
        </pre>
    </div>
    <!-- code-example -->
</div>
<!-- sg-code-block -->
{% endblock %}
{% endraw %}
