Tree embed

Expandable navigation that auto-injects into your theme's filter areas.

Overview

The Tree embed is an app embed that displays your collection hierarchy as expandable navigation. It auto-detects your theme's filter/sidebar container and injects the tree navigation.

Type: App Embed (enabled globally via App embeds, not per-section)

Appears on: Collection pages and Search results pages only

Enabling the embed

Go to Online Store → Themes → Edit theme
Click App embeds in the sidebar
Toggle on Tree embed
Enter your Tree ID (find it in the TreeNav app dashboard)
Configure position, layout and styling
Save

Desktop settings

Filters location

TreeNav uses this setting to automatically find where to inject the tree in your theme. Select the option that matches your theme's filter layout:

Option	Description	Use case
Sidebar	Vertical filter sidebar	Most common layout (Dawn, Warehouse, etc.)
Top bar	Horizontal filter bar	Displays as a dropdown button in the filter bar
Drawer	Slide-out filter drawer	Mobile-style drawers on desktop
Custom position	Manual CSS selector	When auto-detection doesn't work for your theme
Don't integrate	Disable on desktop	Mobile-only navigation

Placement

Where to position the tree relative to the detected container:

Inside (start) – At the beginning of the container (default)
Inside (end) – At the end of the container
Before container – Before the container element
After container – After the container element

Custom position options

When using "Custom position" layout:

CSS Selector – Enter a valid CSS selector (e.g., .my-filter-container, #sidebar)
Display as dropdown – When enabled, shows as a button that opens a dropdown panel (like Top bar mode). Otherwise displays inline.

Mobile settings

Separate configuration for mobile devices (viewport < 750px):

Mobile layout options

Option	Description
Drawer	Filter drawer (default) – most common mobile pattern
Sidebar	Same as desktop sidebar
Top bar	Horizontal dropdown button
Custom position	Manual CSS selector with optional dropdown mode
Same as desktop	Use desktop layout and placement settings
Don't integrate	Hide on mobile

Content settings

Setting	Description	Default
Heading	Title displayed above navigation. Leave blank to hide.	"Categories"
Collapsible heading	Allow clicking heading to collapse/expand the tree panel. Not available in Top bar layout.	Off
Start expanded	Show tree expanded on page load. Only visible when Collapsible heading is on.	On
Show product counts	Display product count badge next to each collection.	Off

Layout settings

Setting	Range	Default	Description
Font size	10-36px	14px	Text size for collection labels
Child indentation	0-50px	16px	Horizontal indent for nested levels
Vertical gap	0-50px	4px	Space between items
Max visible items	0-50	0 (unlimited)	Enable scrolling after this many items. 0 = show all.
Item padding (vertical)	0-50px	6px	Vertical padding inside each item
Item padding (horizontal)	0-50px	10px	Horizontal padding inside each item
Header padding	0-50px	8px	Padding around the heading section

Behavior settings

Setting	Description	Default
Auto-expand to active	Automatically expand the path to the current collection	On
Expand all	Show all tree levels expanded by default. Overrides accordion mode.	Off
Accordion mode	Only one branch per level can be expanded at a time. When expanding a node, siblings collapse.	Off
Contextual navigation	Show only the current branch with a back link instead of the full tree. Useful for deep hierarchies.	Off

Contextual navigation options

When contextual navigation is enabled, additional settings appear:

Setting	Description	Default
Back link text	Text for the back navigation link. Use `[parent]` placeholder to show parent collection name (e.g., "← [parent]" becomes "← Men's")	"Back"
Navigate without page load	Back link navigates within the tree using JavaScript instead of loading a new page. Creates a smoother browsing experience.	Off
Max depth	Maximum nesting levels to display (0-5). 0 = unlimited depth.	0

Color settings

Standard colors

Setting	Default	Description
Text color	#303030	Default link/label color
Background color	transparent	Item background
Hover text color	#000000	Text color on mouse hover
Hover background color	transparent	Background on mouse hover
Active text color	#303030	Current collection text color
Active background color	none	Current collection background

Back link colors (contextual mode only)

Setting	Description
Back link text color	Color for the back navigation link
Back link background color	Background for the back navigation link

Debug

Setting	Description	Default
Show debug panel	Displays a diagnostic panel at the bottom of the page showing: Desktop status – Whether injection succeeded, which selector matched, and placement used Mobile status – Same for mobile viewport Log – Step-by-step detection process showing which patterns were tried Use this to diagnose placement issues. Disable before publishing.	Off

Keyboard navigation

Full keyboard accessibility following ARIA tree pattern:

Key	Action
`Tab`	Enter/exit the tree (single tab stop)
`↑` / `↓`	Move between visible items
`←`	Collapse current node, or move to parent if already collapsed
`→`	Expand current node, or move to first child if already expanded
`Enter`	Navigate to collection page
`Home`	Jump to first item
`End`	Jump to last visible item

Accessibility

WCAG 2.1 AA compliant with:

role="tree" and role="treeitem" ARIA markup
aria-expanded states for expandable nodes
aria-current="page" for the active collection
aria-labelledby and aria-controls relationships
Focus rescue – when collapsing a subtree, focus moves to parent if it was inside
Visible focus indicators with :focus-visible
Reduced motion support via prefers-reduced-motion
High contrast mode support
Screen reader announcements for expand/collapse actions

RTL Support

The tree automatically adapts to right-to-left languages. All CSS uses logical properties:

margin-inline-start instead of margin-left
padding-inline-end instead of padding-right
Flexbox alignment auto-adapts based on document direction

Theme compatibility

TreeNav includes built-in selectors for popular themes:

Sidebar (vertical filters)

Dawn – .facets-container .facets__form .facets__wrapper
Horizon – .facets--vertical .facets__filters-wrapper
Warehouse – #desktop-filters-form

Drawer (mobile filters)

Dawn – .mobile-facets__main
Horizon – .facets-drawer__filters .facets__filters-wrapper

Note: If your theme isn't detected, use Custom position with your theme's filter container selector.

Troubleshooting

Enable Debug mode to see which selector matched/failed
Verify you're on a Collection or Search page (embed only shows there)
Check that the Tree ID is correct and the tree is published
Try a different layout option (Sidebar/Drawer/Custom)
For custom themes, use Custom position with a CSS selector from your theme's filter container

Change the Placement setting (Inside start/end, Before/After)
Use Custom position for precise control

TreeNav uses namespaced CSS classes (.treenav-*) to avoid conflicts
Override styles using the Color settings or custom CSS in your theme
All sizing uses CSS custom properties that can be overridden

Ensure the parent container has position: relative
Check for CSS overflow: hidden on parent elements

More questions? See the FAQ & Troubleshooting guide or contact us.