# Section Nav

> Add navigation between sections. Automatically navigates and updates selected based on screen position.

URL: https://sectionstar.app/sections/section-nav/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.893Z

---

**Section Nav** is a Shopify theme section in the Section Star library. Add navigation between sections. Automatically navigates and updates selected based on screen position.

## About the Section Nav section

The Section Nav is a versatile and customizable navigation section for your Shopify store. This section adds a secondary navigation bar, which is perfect for creating an intuitive and informative user experience. The navigation bar can feature various icons, customizable text and colors, and a sticky behavior that ensures the navigation stays accessible while scrolling pages.

## Live demo

## Use cases

1. **Product Catalogs**: Improve the browsing experience by providing direct links to different product categories like "New Arrivals," "Best Sellers," and "Discounts."
2. **Special Promotions**: Highlight sections for limited-time offers, seasonal sales, or exclusive deals, making it easy for customers to navigate to these sections.
3. **Customer Service**: Add quick links to sections such as "Shipping Information," "Returns," "Customer Support," etc., to assist customers in finding essential information quickly.
4. **Multi-step Forms**: Use it for navigating between steps of a multi-step form, enhancing the user's journey in complex processes like product customization or service registration.

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Font
Set the fonts for your section

| Setting | Type | Default |
| --- | --- | --- |
| Override theme fonts | Checkbox | Off |
| Text Font | Font | sans-serif |
| Text Size | Range | 15 |
| Mobile Text Size | Range | 15 |
| Text Color | Color | #111 |

### Section Design
Set the display of section

| Setting | Type | Default |
| --- | --- | --- |
| Show Section | Select (All Devices, Mobile Only, Desktop Only) | all |
| Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Background when Fixed | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |

### Container Design
Set the design for your inner container

| Setting | Type | Default |
| --- | --- | --- |
| Container Background | Color or gradient | — |
| Container Background when Fixed | Color or gradient | none |
| Container Border Radius | Number | 0 |
| Max Width | Number | 1000 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 10 |

### Navigation
Set the display of Navigation

| Setting | Type | Default |
| --- | --- | --- |
| Active Link Style | Select (Bottom Border, Button) | button |
| Active Border Color | Color | #DDDDDD |
| Active Border Radius (for button display) | Number | 10 |
| Active Background | Color or gradient | linear-gradient(0deg, rgba(240, 240, … |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 20 |
| Spacing between Nav items | Number | 10 |
| Nav Icon Size | Number | 20 |
| Nav Icon Spacing | Number | 5 |
| Icon Color | Color | #ccc |
| Active Icon Color | Color | #0A7EDB |
| Nav Alignment | Text alignment | center |
| Hide until scrolled | Checkbox | Off |

### Sticky Offset
Set the optional offset to account for header when scrolling

| Setting | Type | Default |
| --- | --- | --- |
| Offset from Top | Number | 60 |
| Offset from Top (Mobile) | Number | 40 |

### Thresholds
The % the section needs to be onscreen to activate the navigation

| Setting | Type | Default |
| --- | --- | --- |
| Threshold | Range | 50 |
| Mobile Threshold | Range | 50 |

### Navigation block settings

#### Navigation Link
Set the name and icon for your navigation. Navigation items automatically link to sections in the order they appear within the section hierarchy.

| Setting | Type | Default |
| --- | --- | --- |
| Nav Name | Text | New Item |
| Nav Icon | Select (No Icon, Uploaded Image, Cart, Gift, Gift Card, Shipping…) | tag |
| Image | Image | — |

#### Advanced
Skip sections in the hierachy to link farther down the page

| Setting | Type | Default |
| --- | --- | --- |
| Skip Sections | Number | 0 |