<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
<main>
	<section>
		<h1>Navigation attributes</h1>
		<p>Vegvisir has a few attributes that can be added to elements that can be used to bind navigations and change navigation behavior without JavaScript.</p>
	</section>
	<section class="md param">
		<h3><code class="mtk6">string</code></h3>
		<h2><code class="mtk10">vv</code></h2>
		<p>This attribute can be added to <strong>any</strong> clickable HTML element to bind it like an anchor tag.</p>
		<p>The value of this attribute should be a string with a pathname to the page that should be loaded.</p>
		<p>An element with this attribute will be treated just like an anchor tag, which means (by default) the <code>vv-shell</code> will be navigated.</p>
		<p>Note: If added to an anchor tag, the anchor <code>href</code> will be prefered - and the <code>vv</code> will be ignored.</p>
	</section>
	<section class="md param">
		<h3><code class="mtk6">string</code></h3>
		<h2><code class="mtk10">vv-position</code></h2>
		<p>A <a href="/docs/v3.1.4/Reference/JavaScript/POSITION"><code>Navigation.POSITION</code></a> string that determines where the contents of <code>vv</code> (or <code>href</code> on an anchor tag) should be injected relative to the element with this attribute.</p>
	</section>
	<section class="md param">
		<h3><code class="mtk6">string</code></h3>
		<h2><code class="mtk10">vv-mode</code></h2>
		<p>A <a href="/docs/v3.1.4/Reference/JavaScript/MODE"><code>Navigation.MODE</code></a> string that determines how the contents of <code>vv</code> (or <code>href</code> on an anchor tag) should be injected relative to the element with this attribute.</p>
	</section>
	<hr>
	<section>
		<h1>Wrapper attributes</h1>
		<p>Vegvisir sets a few attributes on elements that wrap soft-navigated content. These attributes are created automatically when it's the first time an element is used as a wrapper.</p>
	</section>
	<section class="md param">
		<h3><code class="mtk6">string</code></h3>
		<h2><code class="mtk10">vv-page</code></h2>
		<p>This attribute's value will be updated with the pathname of the page that was soft-navigated to.</p>
		<p>The attribute is set when a navigation is <strong>initiated</strong>.</p>
	</section>
	<section class="md param">
		<h3><code class="mtk6">bool</code></h3>
		<h2><code class="mtk10">vv-loading</code></h2>
		<p>The value of this attribute will be a string-boolean with a value of "true" or "false".</p>
		<p>this attribute will be "true" when a navigation is initiated, and set to "false" when the contents of the target page has been fully loaded (DOM ready).</p>
	</section>
</main>