Effective navigation is crucial in any digital interface. Smart Components enable the creation of custom interactive navigation elements that seamlessly integrate with your prototype. This guide will explore nesting components, adding events to elements using Event Variables, and passing these through your components. One significant advantage of nested components is the ability to control their states fully, such as unique hover states within another component.

Starting at the Atomic Level

Framer allows for the creation of fully interactive and animated components, including the nesting of components within others. We'll build a navigation bar component for a website containing two types of nested components with unique interactions. Our project will feature a Navigation Bar with five Nav Items and one Shopping Cart component. The design of these nested components will influence the overall navigation bar design. Therefore, it's optimal to start with the 'deepest' nested component and build up from there.

Nesting Components

Once our two components are ready, we can create the component to nest them. Draw your navigation bar, select it on the canvas, and click the Component tool in the Toolbar. To nest a different component, drag it to the Component Canvas and place it within your designed navigation bar.

Triggering Interactions from the Navigation Bar

On the main canvas, we want to enable tapping 'Clothing' to navigate to a new screen. Using the Prototyping Connector to link the component to a new screen would trigger an interaction anywhere within the component, which is not desirable. We want the transition to trigger from a specific element. This is where Event Variables come into play. Event Variables are unique in that they are attached to events rather than properties (like opacity or fill), allowing for precise interaction control.