> For the complete documentation index, see [llms.txt](https://docs.pennicart.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.pennicart.io/attributes/navigation.md).

# Navigation

{% hint style="warning" %}
Please note that this document is still <mark style="color:purple;">**Work in Progress**</mark><mark style="color:purple;">.</mark> It might be updated, revised, or changed entirely in the near future.&#x20;
{% endhint %}

{% hint style="info" %}
All attribute names will start with <mark style="color:purple;">**pc**</mark> for the "**Name**" inside the Webflow Designer
{% endhint %}

### Before you start

In order to properly trigger the bag in the navigation, the bag component needs to be designed and published to Penni Cart's backend. To do this, follow the [steps](/attributes/bag.md) from here before moving foward.

<table data-full-width="true"><thead><tr><th>Name</th><th width="273">Value</th><th>Description</th><th width="100" data-type="checkbox">Required</th></tr></thead><tbody><tr><td><pre><code>pc
</code></pre></td><td><pre><code>bag
</code></pre></td><td>Parent element that nest the entire design</td><td>true</td></tr><tr><td><pre><code>pc
</code></pre></td><td><pre><code>bag-count
</code></pre></td><td>Displays quantity of product in the bag</td><td>true</td></tr></tbody></table>