Brickspace Lab
Contact usContact ShopifyTry a theme
Keystone
Keystone
  • Keystone documentation
  • Getting started
    • Getting started with your theme
      • Keystone overview
      • Theme Colors Setup
      • Theme Typography Setup
      • Theme Borders Setup
      • Product prices
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Custom content for tables
      • Replace "Add to cart"
      • Disable quick add
    • Wholesale
      • Wholesale basics
      • Account restrictions
    • Color and option swatches
    • Device specific visibility
    • Discount popups
  • Templates
    • Templates
      • Collection template
      • Product template
      • Blog template
      • Article template
  • Sections
    • Sections
      • Global Sections
        • Header
        • Footer
        • Navigation links
        • Announcement
        • Cart drawer
        • Account drawer
        • Search drawer
        • Menu drawer
      • Media & Promotional
        • Slideshow
        • Video
        • Split banner
        • Marquee
        • Image hotspot
        • Countdown
        • Discount
        • Banner
        • Slider
        • Testimonial slider
        • Search banner
      • Product & Collection Displays
        • Product grid
        • Product slider
        • Product table
        • Product comparison
        • Recently viewed
        • Collection list grid
        • Collection list slider
        • Featured product
        • Comparison table
      • Content & Marketing
        • Rich text
        • Blog posts grid
        • Testimonial grid
        • Logo list
        • Icon grid
        • Collapsible content
        • Tabs
        • Collage
      • Utility & Custom
        • Custom liquid
        • Tool tip
        • Store locater
      • Forms & CTAs
        • Email sign-up
        • Sign-up form
        • Contact form
  • General
    • General
      • Changelog
        • v1.3.0
        • v1.2.0
        • v1.1.0
        • v1.0.1
        • v1.0.0
      • Known issues and troubleshooting
      • Cloning a demo theme
Powered by GitBook
On this page
  • Section overview
  • Section settings
  • Block settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Sections
  3. Global Sections

Navigation links

Section overview

Navigation links is a slideshow-like component similar to Instagram stories that displays circular images with text labels underneath. It can be configured as either a slider or a grid layout.

Common use cases

  • Highlight key navigation categories or pages in a visually appealing way

  • Create a visual navigation menu for featured collections

  • Display a set of linked categories with consistent styling

  • Create a mobile-friendly navigation experience

Usage tips

  • Use appropriately sized images (recommended 256px by 256px) for best results

  • Keep heading text short and concise for better mobile display

  • For mobile use, the slider view is generally more effective than grid view

  • Consider visibility settings to show different navigation styles on desktop vs mobile

Section settings

Setting
Description

Top spacing

Controls the padding above the section (0-50px)

Bottom spacing

Controls the padding below the section (0-50px)

Color scheme

Sets the background and text color theme for the section

Border color

Sets the color of any borders used in the section

Border position

Controls where borders appear (none, top, bottom, or both)

Size

Determines the size of the circular images (small: 60px, normal: 100px, large: 140px)

Container

Choose between slider (scrollable) or grid layout

X alignment

Sets horizontal alignment (left, center, or right)

Enable margin

When enabled, applies horizontal margin to the section

Visibility

Controls whether the section is visible on all devices, mobile only, or desktop only

Block settings

Link

The Link block creates a circular image with a text label that links to a URL. Each block represents a single navigation item.

Block limit: 20

Setting
Description

Image

The image to display in the circular container (recommended 256px by 256px)

Heading

The text label displayed below the image

URL

The destination page when the navigation item is clicked

Last updated 21 days ago

Was this helpful?