# Navigation Links

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.                                                      |
