Het bouwen van een Navigatie Component met Variabelen

```html

Navigatie is cruciaal binnen elke digitale interface. Slimme componenten stellen ons in staat om aangepaste interactieve navigatiecomponenten te maken die perfect werken met de rest van uw prototype. In deze gids zullen we de concepten van geneste componenten behandelen, evenementen toevoegen aan elementen in een component met behulp van gebeurtenisvariabelen, en deze doorgeven aan uw componenten. Een van de belangrijkste voordelen van het gebruik van geneste componenten is dat het volledige controle biedt over de states, zoals unieke hover-states van elementen binnen een andere component.

Beginnen op atomair niveau

Framer stelt u in staat om volledig interactieve en geanimeerde componenten te creëren en zelfs componenten binnen andere componenten te nesten. We bouwen een navigatiebalkcomponent voor een website die twee verschillende soorten geneste componenten bevat, elk met hun eigen unieke interacties. Ons project zal een navigatiebalk bevatten met verschillende geneste componenten, namelijk vijf navigatie-items en een winkelwagencomponent. Het ontwerp van onze geneste componenten, het navigatiemenu-item en de winkelwagen, zal van invloed zijn op hoe we onze navigatiebalk ontwerpen. Daarom is een optimale workflow om te beginnen met de 'diepst' geneste component en van daaruit op te bouwen.

Geneste componenten

Zodra we onze twee componenten klaar hebben, kunnen we beginnen met het maken van de component waarin we deze zullen nesten. Teken uw navigatiebalk, selecteer deze op het canvas en klik op de Component-tool in de werkbalk. Om een andere component te nesten in onze nieuwe component, sleept u gewoon een andere component naar het componentcanvas en plaatst u deze binnen uw ontworpen navigatiebalk.

Triggeren van interacties vanuit de navigatiebalk

Terug op het hoofdcanvas willen we kunnen tikken op 'Kleding' en navigeren naar een volledig nieuw scherm. Als u de component met behulp van de prototypingsconnector zou verbinden met een nieuw scherm, zouden we een interactie kunnen instellen. Dit zou echter worden geactiveerd als we overal binnen onze component tikken. Dit is niet wat we willen doen, want we willen deze overgang alleen activeren vanaf een specifiek element. Hier komen gebeurtenisvariabelen in het spel, dit zijn speciale typen variabelen die niet zijn gekoppeld aan eigenschappen (zoals opaciteit of vulling) maar in plaats daarvan aan gebeurtenissen.

```