Configuration

Default Navigation Configuration

Proper configuration of navigation menus in the SCAYLE Panel is vital for the main navigation, footer, and checkout within your Storefront Application. The application retrieves these menus based on their assigned names.

For our Storefront Application, we’ve configured four separate navigation menus:

• Header: This navigation tree is used to populate the main header
• Footer: This navigation tree controls the footer
• Simplified Header: This navigation tree controls the simplified header shown in the checkout funnel
• Simplified Footer: This navigation tree controls the simplified footer shown in the checkout funnel

The Storefront Application fetches these navigation menus by name, so be sure to name them exactly as described above. Alternatively, you can update the call to useNavigationTreeByName

typescript

Copy

Navigation Menu Items

Within the SCAYLE Panel, you can create, structure, and customize your navigation menus. This includes visual enhancements and advanced features powered by customData.

1. Create Navigation Structure

Start by building your navigation tree in the SCAYLE Panel to reflect:

• Product categories
• Static content pages
• External links or resources

You can configure up to three levels of nested menu items, allowing for a deep and intuitive hierarchy.

2. Add SVG Icons

Enhance the user interface by assigning SVG icons to menu items (in both the main navigation and footer). Icons appear next to menu labels by default and help users quickly understand the item’s purpose.

3. Advanced Functionalities with Custom Data

Leverage custom data fields to extend functionality or enhance styling. These fields allow you to add metadata to navigation links for special functionalities, such as controlling link behavior, applying custom styling, or enabling conditional rendering (e.g., for tracking).

• Disabled Links: Create non-clickable menu titles for grouping and organizing related links.
• Apply Custom Colors: Use color-coded links to emphasize specific menu items, such as "Sale" or promotional offers.
• Custom Data Attributes: Add arbitrary metadata to links for special functionalities like tracking, or conditional rendering based on custom logic.

Setting Up Custom Data Fields

To start using custom data for navigation items, follow these steps:

1. Access the Navigation Item Custom Data Settings as described in the Custom Data Guideline.
2. Create New Data Fields:
   • Add the following custom data fields:
     • linkColor (type: String): Use this field to define custom colors for navigation links.
     • disabledLink (type: Boolean): Use this field to disable links and create section titles.
3. Apply Custom Data:
   • Once the fields are set up, they will appear in the custom data section of your navigation items.

Using Custom Data Fields

• linkColor: Add a hex color code (e.g., #FF5733) to the linkColor field to enable custom-colored links in your application.
• disabledLink: Set the disabledLink field to true to disable the link functionality for a navigation item. This transforms the item into a section title, ideal for organizing navigation menus.

For more details on how to fully utilize configuration options, refer to our SCAYLE Panel Navigation Guide.