导航在任何数字界面中都至关重要。智能组件使我们能够创建定制的交互式导航组件，可以与您的原型的其余部分完美配合。在本指南中，我们将介绍嵌套组件的概念，使用事件变量向组件中的元素添加事件，并通过组件传递这些事件。使用嵌套组件的主要好处之一是它可以完全控制其状态，例如另一组件中元素的唯一悬停状态。

从原子级开始

Framer允许您创建完全交互式和动画组件，甚至允许您将组件嵌套在其他组件中。我们正在为一个网站构建一个包含两种不同类型的嵌套组件的导航栏组件，带有各自独特的交互。我们的项目将包含一个导航栏，其中包含各种嵌套组件，即五个导航项和一个购物车组件。我们嵌套组件的设计，即导航列表项和购物车，将影响我们如何设计导航栏。因此，最佳工作流包括从“最深层”的嵌套组件开始构建。

嵌套组件

一旦我们准备好两个组件，我们就可以开始创建嵌套这些组件的组件。绘制您的导航栏，然后在画布上选择它并点击工具栏中的组件工具。要在新组件中嵌套不同的组件，只需将任何其他组件拖动到组件画布中，并将其放置在您设计的导航栏内。

从导航栏触发交互

回到主画布，我们希望能够点击“服装”并导航到一个全新的屏幕。如果您使用连接器将组件连接到新屏幕，我们可以设置一个交互。但是，这将在我们单击组件内任何地方时触发。这不是我们想要做的，因为我们只想从特定元素触发此转换。这就是事件变量的作用，它们是不附加到属性（如不透明度或填充）而是附加到事件的特殊类型变量。