Building a Navigation Component with Event Variables
Learn all about nesting components and adding custom event triggers for any item within a (navigation) component.
Navigation is key within any digital interface. Smart Components enable us to create custom interactive navigation components that work perfectly with the rest of your prototype.
In this guide, we will cover the concepts of nesting components, adding events to elements in a component using Event Variables, and passing these through your components.
One of the main benefits of using nested components is that it provides full control over its states, such as unique hover states of elements within another component.
This gives us the power to create a prototype like below:
To check out the end result of the prototype, duplicate your version here.
Starting at the atomic level
Framer allows you to create fully interactive and animated components, and even allows you to nest components within other components.
We’re building a navigation bar component for a website that will contain two different kinds of nested components, with their own unique interactions. Our project will contain a Navigation bar that contains various nested components, namely five Nav items and one Shopping cart component.
The design of our nested components, the nav list item and the shopping cart, will impact how we design our navigation bar. For this reason, an optimal workflow includes starting with the 'deepest' nested component and building up from there.
Once we have our two components ready, we can start creating the component in which we will nest these. Draw your navigation bar, select it on the canvas and click the Component tool in the Toolbar.
To nest a different component in our new component, just drag any other component to the Component Canvas and place it within your designed navigation bar.
Triggering interactions from the navigation bar
Back on the main canvas, we’d like to be able to tap "Clothing" and navigate to an entire new Screen. If you’d connect the component using the Prototyping Connector to a new screen, we could set up an Interaction. However, this would be triggered if we tap anywhere within our component.
This isn’t what we want to do, as we want to trigger this transition only from a specific element. This is where Event Variables come in, which are special types of Variables not attached to properties (like
fill) but instead to events.
Creating custom event variables
To create an event variable, we find our way to the (nested) component from which we want to trigger an event. In our case, we double-click into the List Item component used for our e-commerce categories.
Once we’re in its Component Canvas, we can create a new Event Variable by selecting our primary variant and clicking the Interactions + section to the top of the properties panel.
From the dialog, pick Create Event. We’ll notice that the Variables window opens up, where we give our new Event Variable a name to recognize it later on.
We have now created a custom event that can be hooked into where we are using our list item component.
Tip: From the dialog under the + Interaction button, we see Add Transition and Create Event. Add Transition is a transition between variants within the component, while Create Event is used to attach an event that we can leverage in our entire prototype.
Event variables and their availability
It is important to highlight that whenever you create a Variable, whether for a ‘normal’ property or for an event, that this Variable is only available wherever this component is nested.
This means that when we are dealing with a simple example where we have a prototype consisting of a Screen and a single Smart Component, we can access these Variables from the main canvas as this is where we nested our component within a Screen.
But if we are dealing with another component in which we nested this component that we created Variables for, we can currently only access this Variable in the parent component. For each level deep the component is used, we need to lift up the Variable up a level.
Lifting up events from nested components
In our example, we have just created an Event Variable which is now available only in the Component Canvas of our Navigation bar component where we nested the List item component.
In the e-commerce site we’re prototyping, it needs to be available back on our main canvas for a specific instance of our List item component.
To add a unique event to our List item “clothing” component, we now select it within the Navigation bar component. We then add an Event Variable in the same way as before, under the + Interaction button by clicking Create Event.
Finally, we can now specify that this event means we trigger the “Clothing” List item, so we can name our event “Click Clothing”.
Smart Components are incredibly powerful not just for interactive states, but also to reuse and customize using Variables.
Knowing how to pass Variables up and down a component is a very useful skill to have to make the most out of your components, which we learned about by creating a fully functional navigation component with nested components and custom Event Variables.
Created a cool project using these techniques? Share it with us and everyone else in our Discord Community!