Contextual navigation

What is contextual navigation?

By default, the tree embed shows your entire hierarchy. Contextual mode shows only:

• Children of the current collection
• A back link to the parent

This is useful for:

• Deep hierarchies (4+ levels)
• Mobile-first designs
• Focused browsing experiences

Standard vs. contextual

Standard mode (full tree):

▼ Clothing
  ▼ Men's         ← You are here
    • Shirts
    • Pants
    • Outerwear
  • Women's
  • Kids
• Accessories

Contextual mode:

← Clothing        ← Back link
• Shirts
• Pants
• Outerwear       ← Children only

Enabling contextual mode

1. Go to Online Store → Themes → Edit theme
2. Click App embeds
3. Open TreeNav Tree settings
4. Enable Contextual navigation
5. Configure the options:
   • Back link text – e.g., "← [parent]"
   • Navigate without page load – Optional JS navigation
   • Max depth – Limit levels shown
6. Save

Back link configuration

The back link text supports a placeholder:

The [parent] placeholder is replaced with the parent collection name.

Max depth

Limit how many levels to show:

Use lower values for cleaner mobile navigation.

Navigate without page load

When enabled, clicking the back link uses JavaScript instead of a full page load.

Benefits:

• Faster navigation feel
• Smoother transitions
• Preserves scroll position in some cases

When to use:

• Modern browsers only
• When you want SPA-like feel
• For mobile-optimized experiences

Example use case

Deep product catalog

Your store has:

Electronics
└── Computers
    └── Laptops
        └── Gaming Laptops
            └── ASUS ROG

5 levels is hard to display in a sidebar.

Contextual solution:

• At "Gaming Laptops", show only laptop brands
• Back link goes to "Laptops"
• Users drill down one level at a time

Combining with breadcrumb

Contextual mode pairs well with breadcrumb:

Home › Electronics › Computers › Laptops    ← Breadcrumb shows full path

← Computers             ← Contextual tree shows siblings
• Gaming Laptops
• Business Laptops
• Ultrabooks

Users can:

• See where they are (breadcrumb)
• Explore siblings (contextual tree)
• Go back up (back link)

Mobile optimization

Contextual mode is especially useful on mobile:

1. Enable Contextual navigation
2. Set Max depth to 1
3. Use descriptive Back link text
4. Enable Navigate without page load for speed

This creates a drill-down experience similar to native apps.

Styling tips

Contextual mode shows a back link that can be styled separately:

• Back link color – Make it stand out as navigation
• Back link background – Optional highlight

Consider using a distinct style so users recognize it as "go back" not a regular category.

When to use standard vs. contextual

Troubleshooting

Back link not showing:

• You're at the root level (no parent)
• Check back link text is set

Too many/few levels:

• Adjust Max depth setting

JS navigation not working:

• Check browser console for errors
• Feature requires modern browser