CSS classes

Reference of all CSS classes used by TreeNav blocks for custom styling.

All TreeNav blocks use consistent CSS classes that you can target for custom styling. Add custom CSS in your theme under Online Store → Themes →Edit theme → Theme settings → Custom CSS.

Tree embed

Base classes

Class	Description
`.treenav`	Root nav container
`.treenav--embed`	Embed-specific modifier
`.treenav--scrollable`	Enables scrolling (max_visible_items)

Header (collapsible)

Class	Description
`.treenav__header`	Collapsible header button
`.treenav__header--static`	Non-collapsible header
`.treenav__title`	Heading text
`.treenav__chevron`	Collapse indicator icon
`.treenav__panel`	Collapsible content panel

Tree structure

Class	Description
`.treenav__tree`	Root list (ul, role="tree")
`.treenav__children`	Child list (ul, role="group")
`.treenav__node`	Node container (li)
`.treenav__row`	Row wrapper (toggle + link)

Node elements

Class	Description
`.treenav__link`	Collection link (a)
`.treenav__link--back`	Back link (contextual mode)
`.treenav__label`	Text label span
`.treenav__count`	Product count badge
`.treenav__toggle`	Expand/collapse button
`.treenav__icon`	Toggle chevron icon

Data attributes (for styling)

Selector	Description
`.treenav[data-open="true"]`	Panel is expanded
`.treenav__node[data-active="true"]`	Current collection
`.treenav__node[data-state="open"]`	Node is expanded
`.treenav__node[data-in-path="true"]`	Node is in active path
`.treenav__link[aria-current="page"]`	Current page link

Layout modifiers (embed injection)

Class	Description
`.treenav-embed-wrapper`	Wrapper for injected tree
`.treenav--layout-sidebar`	Sidebar layout (vertical)
`.treenav--layout-topbar`	Topbar layout (dropdown)
`.treenav--layout-drawer`	Drawer layout (compact)
`.treenav--layout-custom`	Custom layout (minimal)

Breadcrumb

Class	Description
`.treenav-breadcrumb-block`	Block wrapper (section level)
`.treenav-breadcrumb`	Nav container
`.treenav-breadcrumb__list`	Ordered list (ol)
`.treenav-breadcrumb__item`	List item (li)
`.treenav-breadcrumb__link`	Clickable link (a)
`.treenav-breadcrumb__current`	Current page (non-linked span)
`.treenav-breadcrumb__ellipsis`	Truncation ellipsis item

Note: Separators are rendered via ::after pseudo-element on items, not as separate elements. Style with:

.treenav-breadcrumb__item:not(:last-child)::after {
  content: var(--bc-separator, '/');
  color: var(--bc-separator-color);
}

Drilldown

Container classes

Class	Description
`.treenav-drilldown-block`	Block wrapper (section level)
`.treenav-drilldown`	Main container
`.treenav-drilldown--center`	Center-aligned layout
`.treenav-drilldown--stacked`	Stacked/wrap display mode
`.treenav-drilldown--arrows-right`	Arrows positioned right with fade

Structure

Class	Description
`.treenav-drilldown__wrapper`	Flex wrapper (contains arrows)
`.treenav-drilldown__container`	Scroll container (nav element)
`.treenav-drilldown__list`	Pills list (ul)
`.treenav-drilldown__heading`	Optional heading (h3)
`.treenav-drilldown__heading--sticky`	Sticky heading modifier

Pill items

Class	Description
`.treenav-drilldown__item`	Pill link (a element)
`.treenav-drilldown__item--active`	Current collection pill
`.treenav-drilldown__item--back`	Back/grandparent link
`.treenav-drilldown__item--all`	All/parent link

Scroll arrows

Class	Description
`.treenav-drilldown__scroll`	Scroll button (base)
`.treenav-drilldown__scroll--left`	Left arrow button
`.treenav-drilldown__scroll--right`	Right arrow button

Debug panel

Only visible when Debug mode is enabled in embed settings.

Class	Description
`.treenav-debug`	Debug panel container
`.treenav-debug__header`	Header bar
`.treenav-debug__title`	Title text
`.treenav-debug__toggle`	Collapse toggle button
`.treenav-debug__content`	Content area
`.treenav-debug__row`	Row (label + value)
`.treenav-debug__label`	Row label
`.treenav-debug__value`	Row value
`.treenav-debug__log`	Log messages container

Placeholder (theme editor)

Shown in theme editor when block cannot render (missing tree, wrong page, etc.).

Class	Description
`.treenav-placeholder`	Base placeholder
`.treenav-placeholder--warning`	Warning style (yellow)
`.treenav-placeholder--info`	Info style (blue)

Utilities

Class	Description
`.visually-hidden`	Screen reader only (hidden visually)
`.icon`	Base SVG icon (16x16)
`.icon--sm`	Small icon (12x12)

CSS custom properties

Tree variables

.treenav {
  /* Layout */
  --treenav-font-size: 14px;
  --treenav-indent: 16px;
  --treenav-gap: 4px;
  --treenav-padding-v: 6px;
  --treenav-padding-h: 8px;
  --treenav-header-padding: 8px;
  --treenav-toggle-size: 28px;
  --treenav-icon-size: 12px;
  --treenav-radius: 6px;
  --treenav-max-items: 10;

  /* Colors */
  --treenav-text: #303030;
  --treenav-text-hover: #000000;
  --treenav-active-text: #303030;
  --treenav-hover-bg: transparent;
  --treenav-active-bg: rgba(0, 0, 0, 0.05);
  --treenav-back-text: currentColor;
  --treenav-back-bg: transparent;
  --treenav-focus: currentColor;
}

Breadcrumb variables

.treenav-breadcrumb {
  --bc-separator: '/';
  --bc-gap: 8px;
  --bc-text: #303030;
  --bc-text-hover: #000000;
  --bc-current: #707070;
  --bc-separator-color: #707070;
}

Drilldown variables

.treenav-drilldown {
  /* Layout */
  --dd-gap: 8px;
  --dd-font-size: 13px;
  --dd-radius: 20px;
  --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;
}

Examples

Style active tree link

/* Change active collection styling */
.treenav__node[data-active="true"] > .treenav__row > .treenav__link {
  color: #your-brand-color;
  background: rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

Style breadcrumb separator

/* Use arrow separator */
.treenav-breadcrumb {
  --bc-separator: '→';
  --bc-separator-color: #999;
}

Round drilldown pills

/* Full rounded pills */
.treenav-drilldown {
  --dd-radius: 9999px;
}

/* Or target pills directly */
.treenav-drilldown__item {
  border-radius: 9999px;
}

Hide product counts

/* Hide count badges */
.treenav__count {
  display: none;
}

Custom toggle position

/* Move toggle to left side */
.treenav__row {
  flex-direction: row; /* default is row-reverse */
}

.treenav__toggle {
  margin-inline-start: 0;
  margin-inline-end: 4px;
}