The Navigator

Article Overview

The following article describes the Navigator section.

Overview

(See Figure 1)

When clicking the Navigator tab, the left section displays a structured names list of Webflow components added to the canvas, organized logically by hierarchy.

Figure 1: Navigator Example

Physical Structure

when building a Webflow, the Page, the Container, and the Array are Object-type components that hold other components.

• A Page can hold:
  • A Container
  • An Array
  • A Grid
  • All other components
• A Container can hold:
  • An Array
  • A Grid
  • All other components
• An Array can hold:
  • A Container
  • A Grid
  • All other components

The exception is the Grid which is not an Object-type component but can also hold other components:

• A Container
• An Array
• All other components

Logical Structure and Hierarchy

The following sections describe examples of logical structures and hierarchies that will be displayed in the Navigator section according to different physical structures of components.

Example 1

Figure 2 displays the following physical structure:

• The Page holds the Container
• The Container contains a Grid
• The Grid holds four Text Field components

Figure 2: Physical Structure

Figure 3 displays the logical structure and hierarchy that will be displayed in the Navigator according to the described physical structure:

• The Page nests the Container
• The Container nests the Grid
• The Grid nests four Text Field components

Figure 3: Logical Structure and Hierarchy

Example 2

Figure 4 displays a Page that holds the following components:

• Static Text
• Checkbox component
• Signature

Figure 4: Physical Structure 

Figure 5 displays the Navigator's logical structure and hierarchy in which the Page nests all other components.

Figure 5: Logical Structure and Hierarchy

Example 3

The Navigator of a Webflow with multiple pages will display logical structures and hierarchies according to the number of pages (see Figure 6).

Figure 6: Multiple Pages 

Logical Structure, Hierarchy, and Conditions

Creating a logical structure and hierarchy is very important when implementing behavioral conditions for two main reasons:

• Inheritance - when implementing a behavioral condition on Object-type components (Page, Container, and Array) all the components they nest will inherit the same behavioral condition.   
• The path of nested components must be accurate when used with behavioral conditions.