Navigation Links

The Navigation Links block inside the Search Modules section allows you to display a list of key navigation links directly within the search interface.

This feature enhances user experience by giving quick access to important pages or categories — for example, “Contact Us,” “Gift Cards,” “Shipping Info,” or even curated collections — right inside the search dropdown or search results layout.

By adding navigation links in the search area, you make it easier for customers to find commonly accessed pages without performing a full site search, improving usability and supporting faster navigation.

You can also customize the layout’s visual style through detailed color, border, and background settings — both for default and hover states.

---

Navigation Links — Options Overview

Option	Description
Heading	Defines the title displayed above the group of links (e.g., “Quick Links,” “Explore,” “Categories”). Helps organize navigation visually within the search module.
Navigation links	Select an existing menu from your Shopify Navigation to display its links. The selected links appear as clickable items within the search interface.
Show icon	Displays icons next to each navigation link. Icons can visually represent link content and make navigation more intuitive.
Colors	Opens the general color settings for the block. All following options allow you to customize the look of the navigation links, including text, background, and border colors.
Border	Sets the border color for the navigation area or for each link. Use it to create visual separation or match the theme’s style.
Show background	Enables a solid or gradient background behind the navigation links area. Helps the block stand out from the rest of the page or search results.
Background	Defines the main background color for the navigation links container. Choose a color that complements your theme.
Background gradient	Applies a gradient fill for the navigation background. Can be used to achieve a more dynamic or modern visual effect.
Border	Controls the color of the border surrounding the navigation links section or individual items.
Text	Sets the color of the link text in its default (non-hovered) state. Choose a readable and brand-consistent color.
Show background on hover	Enables a hover effect that changes the background color when the user hovers over a link. Enhances interactivity.
Background hover	Defines the background color visible when a user hovers over a link. Usually used to highlight active or focused states.