The Navigator

Article Overview

The following article describes the Navigator section.

Overview

(See Figure 1)

When clicking the navigator icon, 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 Hierarchy

The following sections describe examples of physical structures and logical 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 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 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 hierarchies according to the number of pages (see Figure 6).

Figure 6: Multiple Pages 

Physical Structure, Hierarchy, and Conditions

Building accurate physical structures and logical hierarchies is very important when setting and implementing behavioral conditions for two main reasons:

• Inheritance - when you apply a behavioral condition to an Object-type component (Page, Container, or Array), all nested components will automatically inherit that condition.
• The path of nested components must be accurate when used with behavioral conditions.