Customization

The Storefront Boilerplate provides extensive customization options for its navigation system, allowing you to tailor the header, main menu, footer, and checkout navigation to your specific business needs. These options ensure that your site navigation aligns with your branding, usability goals, and promotional strategies.

Customizing Navigation Structure

• Create Navigation Items: Start by creating your navigation tree to reflect your product categories, content pages, or external resources.
• Nested Navigation Levels: Configure up to three levels of menu items for detailed and intuitive navigation structures.

Visual Customizations

• SVG Icons: Assign icons to menu items in the main menu or footer to enhance visual appeal and improve user comprehension. Icons are currently displayed alongside navigation item labels by default, ensuring a clear visual representation of each menu item.

Advanced Functionalities with Custom Data

• 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 metadata to links for special functionalities like tracking, or conditional rendering.

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 these customization options, refer to our SCAYLE Navigation Guide.