Product Categories

Category tree and list management

SaaSProducts

Overview

CategoryTree renders a nested tree of product categories with expand/collapse toggling, optional product counts per node, and single-selection highlighting. Supports pre-expanded nodes, flat or deeply nested category structures, and loading/empty/error states.

Usage

import { CategoryTree } from "@leanicon/web-builder-library/saas";

<CategoryTree
  categories={categories}
  selectedId={selectedCategoryId}
  onSelect={(category) => setSelectedCategory(category.id)}
  onToggle={(id, expanded) => console.log(id, expanded)}
  showProductCount
  defaultExpandedIds={["cat-1", "cat-2"]}
/>;

Variants

Loading

Empty

No categories defined

Create categories to organize products

Error

Failed to load categories. Please try again.

Flat Categories

Category A10
Category B20
Category C15
Category D5

With Product Counts

Software200
Services50

Dark

Category A10
Category B20
Category C15

Deeply Nested (code only)

<CategoryTree
  categories={[
    {
      id: "deep-1",
      name: "Level 1",
      slug: "l1",
      order: 0,
      children: [
        {
          id: "deep-2",
          name: "Level 2",
          slug: "l2",
          order: 0,
          parentId: "deep-1",
          children: [
            {
              id: "deep-3",
              name: "Level 3",
              slug: "l3",
              order: 0,
              parentId: "deep-2",
              children: [
                { id: "deep-4", name: "Level 4", slug: "l4", order: 0, parentId: "deep-3" },
              ],
            },
          ],
        },
      ],
    },
  ]}
  defaultExpandedIds={["deep-1", "deep-2", "deep-3"]}
/>