Drilldown

Horizontal pill-style navigation for quick category switching.

Overview

The Drilldown block displays sibling or child collections as horizontal pills. Includes optional back and "All" links for navigating the hierarchy.

Type: App Block (collection pages only)

Example: [ ← Men's ] [ All ] [ Shirts ] [ Pants ] [ Shoes ]

Adding the block

Go to Online Store → Themes → Edit theme
Navigate to a collection page template
Click Add section or Add block
Select Drilldown
Enter your Tree ID (find it in the TreeNav app dashboard)
Configure settings and save

Note: This block only appears on collection pages (enforced via enabled_on in schema).

Content settings

Setting	Description	Default
Tree ID	The ID of your navigation tree. Find this in the TreeNav app dashboard.	—
Heading	Optional title above the pills. Leave blank to hide.	—
Sticky heading	Keep heading visible while scrolling pills. Only visible when Heading is set.	Off
Back link text	Link to grandparent collection (two levels up). Supports `[parent]` placeholder. Leave blank to hide.	—
All link text	Link to parent collection (one level up). Leave blank to hide.	"All"

Placeholder example

[parent] is replaced with the target collection name:

Back link: "← [parent]" becomes "← Men's"

Layout settings

Setting	Options/Range	Default	Description
Alignment	Left, Center	Left	Horizontal alignment of pills
Display mode	Slider, Stacked	Slider	Slider: horizontal scroll. Stacked: wrap to multiple lines.
Show scroll arrows	On/Off	On	Show navigation arrows when content overflows. Only visible in Slider mode.
Arrows position	Inline, Right	Right	Inline: arrows on each side. Right: both arrows grouped on right with fade effect. Only visible when arrows enabled.
Arrows border radius	0-100px	4px	Roundness of arrow buttons. Only visible when arrows enabled.
Item gap	4-16px	8px	Space between pills
Top padding	0-24px	8px	Padding above the block
Bottom padding	0-24px	8px	Padding below the block
Border radius	0-100px	2px	Roundness of pill buttons

Arrow colors (Slider mode only)

These settings only appear when Display mode is Slider and Show scroll arrows is enabled:

Setting	Default	Description
Fade background	#ffffff	Gradient fade color when arrows are positioned Right. Only visible when Arrows position is Right.
Arrow color	#303030	Arrow icon color
Arrow background	#ffffff	Arrow button background
Arrow border	#e5e7eb	Arrow button border color

Typography settings

Setting	Range	Default	Description
Font size	12-16px	13px	Text size for pill labels

Color settings

Default state

Setting	Default	Description
Text color	#303030	Pill text color
Background color	#f3f4f6	Pill background
Border color	#e5e7eb	Pill border

Hover state

Setting	Default	Description
Hover text color	#000000	Text color on mouse hover
Hover background	#e5e7eb	Background on mouse hover
Hover border	#d1d5db	Border on mouse hover

Active state (current collection)

Setting	Default	Description
Active text color	#ffffff	Current collection text
Active background	#303030	Current collection background
Active border	#303030	Current collection border

Display modes

Slider (default)

Pills scroll horizontally. Arrow buttons appear when content overflows.

Arrow positions

Position	Behavior
Inline	Left arrow on left edge, right arrow on right edge
Right	Both arrows grouped on right with gradient fade effect over pills

Stacked

Pills wrap to multiple lines. Scroll arrows are automatically hidden in this mode.

How it works

TreeNav determines what to display based on the current collection's position in your tree:

Decision logic

Find the current collection in your tree
If current has children → show children
If current is a leaf (no children) → show siblings
If current is at root level → show root siblings
If current not in tree → show root nodes

Navigation links

Link	Navigates to	When shown
Back link	Grandparent (two levels up)	When grandparent exists and back_link_text is set
All link	Parent (one level up)	When parent exists and all_link_text is set
Pill links	Sibling or child collections	Always (when items exist)

Example scenarios

Current location	Shows
Men's → Shirts → Casual	Back: Men's \| All: Shirts \| Siblings: Casual*, Formal, Polo
Men's → Shirts (has children)	Back: (root) \| All: Men's \| Children: Casual, Formal, Polo
Men's (root level)	Root siblings: Men's*, Women's, Kids

* = active/current item

Keyboard navigation

Key	Action
`Tab`	Move between pills and arrows
`←` / `→`	Navigate between pills when focused
`Enter`	Navigate to collection

Accessibility

<nav aria-label="Sub-categories"> landmark
aria-labelledby links nav to heading when present
aria-current="page" on active pill
Scroll buttons have aria-label for screen readers
Hidden buttons use hidden attribute (removed from tab order)

Troubleshooting

Check that the current collection exists in your tree
Verify Tree ID is correct in block settings
Collections at root level with no siblings show root nodes
Deleted collections are automatically filtered out

The current collection might be an only child
Add more collections at the same level in your tree

Enable Show scroll arrows in settings
Arrows only appear when content overflows the container
Switch Display mode to Slider (Stacked mode hides arrows)

Fade only appears with Arrows position set to Right
Adjust Fade background color to match your theme background

CSS customization

Override default styles using these CSS classes:

Class	Element
`.treenav-drilldown`	Main container
`.treenav-drilldown--center`	Center-aligned modifier
`.treenav-drilldown--stacked`	Stacked mode modifier
`.treenav-drilldown--arrows-right`	Right arrows modifier
`.treenav-drilldown__heading`	Heading element
`.treenav-drilldown__heading--sticky`	Sticky heading modifier
`.treenav-drilldown__list`	Pills container (ul)
`.treenav-drilldown__item`	Pill link
`.treenav-drilldown__item--back`	Back link pill
`.treenav-drilldown__item--all`	All link pill
`.treenav-drilldown__item--active`	Current collection pill
`.treenav-drilldown__scroll`	Scroll arrow button
`.treenav-drilldown__scroll--left`	Left arrow
`.treenav-drilldown__scroll--right`	Right arrow

CSS custom properties

.treenav-drilldown {
  --dd-gap: 8px;
  --dd-font-size: 13px;
  --dd-radius: 2px;
  --dd-arrows-radius: 4px;
  --dd-padding-top: 8px;
  --dd-padding-bottom: 8px;

  /* Default state */
  --dd-text: #303030;
  --dd-bg: #f3f4f6;
  --dd-border: #e5e7eb;

  /* Hover state */
  --dd-text-hover: #000000;
  --dd-bg-hover: #e5e7eb;
  --dd-border-hover: #d1d5db;

  /* Active state */
  --dd-text-active: #ffffff;
  --dd-bg-active: #303030;
  --dd-border-active: #303030;

  /* Arrows */
  --dd-fade: #ffffff;
  --dd-arrow: #303030;
  --dd-arrow-bg: #ffffff;
  --dd-arrow-border: #e5e7eb;
}

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