🏛️ Hierarchical Navigation Pattern

Understanding how parent-child-grandchild relationships work

What Is Hierarchy?

A hierarchy is a structure where items are organized in levels:

Level 1 (Top)
  ├─ Level 2a
  │   ├─ Level 3a1
  │   └─ Level 3a2
  ├─ Level 2b
  └─ Level 2c
      └─ Level 3c1

Each level is contained within a higher level.

Real-World Examples

Company Hierarchy

Company
  ├─ Department 1
  │   ├─ Team A
  │   └─ Team B
  ├─ Department 2
  │   └─ Team C

Document Hierarchy

Library
  ├─ Fiction
  │   ├─ Mystery
  │   └─ Romance
  ├─ Non-Fiction
  │   └─ Science

Project Hierarchy

Project
  ├─ Phase 1
  │   ├─ Task 1
  │   └─ Task 2
  ├─ Phase 2
  │   └─ Task 3

How It Works in This Application

The Three Levels

PARENT (Level 1)
  └─ CHILD (Level 2)
      └─ GRANDCHILD (Level 3)

Parent: The top-level record Child: Records that belong to a parent Grandchild: Records that belong to a child

Screen Layout

┌──────────────────────────────────────────────┐
│ PARENT TABLE                                 │
│ │ Parent A │  ← selected row (highlighted)   │
└──────────────────────────────────────────────┘
        ↓ loads automatically
┌─[ Children ]─[ History ]─────────────────────┐
│ [☰ ▼]  Children (of Parent A)   Records: 3   │
│ │ Child 1 │                                  │
│ │ Child 2 │  ← Click to select               │
│ │ Child 3 │                                  │
└──────────────────────────────────────────────┘
        ↓ loads automatically
┌─[ Grandchildren ]────────────────────────────┐
│ [☰ ▼]  Grandchildren (of Child 2)            │
│ │ Grandchild 1 │                             │
│ │ Grandchild 2 │                             │
└──────────────────────────────────────────────┘

Each level shows its related tables as tabs, and each tab has its own ☰ Actions menu — select a row at any level, then Edit/Delete/View it from that table's menu.

Step 1: See All Parents

Start by viewing all top-level records:

All Parents:
┌────┬─────────┬────────┐
│ ID │ Name    │ Value  │
├────┼─────────┼────────┤
│ 1  │ Parent A│ ...    │  ← Available to click
│ 2  │ Parent B│ ...    │
│ 3  │ Parent C│ ...    │
└────┴─────────┴────────┘

Step 2: Click a Parent, See Its Children

Click on "Parent A":

PARENT TABLE
┌────┬─────────┬────────┐
│ 1  │ Parent A│ ...    │  ← selected (highlighted)
│ 2  │ Parent B│ ...    │
└────┴─────────┴────────┘

RELATED TABS (appear below automatically)
┌─[ Children ]─[ History ]──────┐
│ ┌────┬──────────┐             │
│ │ ID │ Child    │             │
│ ├────┼──────────┤             │
│ │ 1  │ Child A1 │             │  ← Children of Parent A
│ │ 2  │ Child A2 │             │
│ │ 3  │ Child A3 │             │
│ └────┴──────────┘             │
└───────────────────────────────┘

What changed: - Parent A's row is highlighted - Its related tables appear below as tabs - Only children of Parent A appear — Parent B's and C's are not shown

Step 3: Click a Child, See Its Grandchildren

Click on "Child A2":

PARENT A (still selected above)

┌─[ Children ]──────────────────────┐
│ │ Child A2 │ ← selected           │
│                                   │
│  ┌─[ Grandchildren ]──────────┐   │
│  │ │ Grandchild 1 │           │   │  ← Grandchildren of Child A2
│  │ │ Grandchild 2 │           │   │
│  └────────────────────────────┘   │
└───────────────────────────────────┘

What changed: - Child A2 is now highlighted/shown - Only grandchildren of Child A2 appear - Grandchildren of Child A1 and A3 are hidden

The Container Concept

Think of it like nested containers:

Parent Container "A"
  └─ Child Container "A2"
      └─ Grandchild Item 1
      └─ Grandchild Item 2
  └─ Child Container "A1"
      └─ Grandchild Item 3

Parent Container "B"
  └─ Child Container "B1"
      └─ Grandchild Item 4

When you select Container "A", you see contents of A. When you select Container "A2", you see contents of A2.

Relationships Behind the Scenes

How Parent-Child Connection Works

Parent Table:
ID | Name
1  | Parent A
2  | Parent B

Child Table:
ID | Name | parent_id  ← This connects child to parent
1  | Child A1 | 1      ← Child A1 belongs to Parent A (1)
2  | Child A2 | 1      ← Child A2 belongs to Parent A (1)
3  | Child B1 | 2      ← Child B1 belongs to Parent B (2)

Foreign Key: The parent_id column points to the parent record.

How Child-Grandchild Connection Works

Child Table:
ID | Name | parent_id
1  | Child A1 | 1
2  | Child A2 | 1

Grandchild Table:
ID | Name | child_id  ← This connects grandchild to child
1  | GrandC 1 | 1     ← GrandC 1 belongs to Child A1 (1)
2  | GrandC 2 | 2     ← GrandC 2 belongs to Child A2 (2)
3  | GrandC 3 | 2     ← GrandC 3 belongs to Child A2 (2)

Adding Records at Different Levels

Every table — main table or child tab — has its own ☰ Actions menu; Create New in that menu creates a record at that level.

Add a Parent

On the main (top) table:

☰ Actions → Create New
→ Creates new top-level record
→ Not attached to any parent

Add a Child

Select the parent row, then use the child tab's own menu:

PARENT A (selected)
┌─[ Children ]─────────────┐
│ [☰ ▼] → Create New       │  ← the child tab's Actions menu
└──────────────────────────┘
→ Creates new child
→ Automatically connected to Parent A (link field pre-filled)

Add a Grandchild

Select the parent, then the child inside its tab, then use the grandchild tab's menu:

PARENT A (selected)
CHILD A2 (selected in the Children tab)
┌─[ Grandchildren ]────────┐
│ [☰ ▼] → Create New       │
└──────────────────────────┘
→ Creates new grandchild
→ Automatically connected to Child A2

Deleting Records Carefully

Delete a Child

PARENT A
  ├─ CHILD A1  ← Delete this
  ├─ CHILD A2
  └─ CHILD A3

PARENT A
  ├─ CHILD A2
  └─ CHILD A3
← CHILD A1 and its grandchildren removed

Delete a Parent (⚠️ Careful!)

PARENT A  ← Delete this
  ├─ CHILD A1
  │  ├─ GrandC 1
  │  └─ GrandC 2
  └─ CHILD A2

What happens:
- Parent A deleted
- All children orphaned or also deleted (depends on settings)
- Check with your administrator!

Changing Views

Switch to Different Parent

Currently viewing:
PARENT A
  ├─ Child A1
  ├─ Child A2

Click PARENT B instead:
PARENT B  ← Changed!
  ├─ Child B1
  ├─ Child B2
  └─ Child B3

← The display updates automatically

Go Back to Parents Only

Click the table's entry in the left menu again — it reloads the list fresh, with no row selected and nothing expanded:

Left menu → (the table you're viewing)

Returns to:
All Parents
├─ Parent A
├─ Parent B
├─ Parent C

Why This Matters

Organizing Complex Data

Hierarchies group related information:

Customer
  └─ Order
      └─ Item

Makes it easy to see: "All items in this order for this customer"

Preventing Orphaned Data

With relationships, you know what depends on what:

Can't delete Parent if Children exist (usually)
← Prevents "orphaned" records with no parent

Natural Navigation

Hierarchies match how people think:

"Show me this company"
  "Now show me its departments"
    "Now show me its employees"

Common Patterns

One-to-Many (Most Common)

One Parent → Many Children

Company
  └─ Employee 1
  └─ Employee 2
  └─ Employee 3
  └─ Employee 4

Each employee belongs to one company. Each company can have many employees.

Two-Level Hierarchy

Category
  └─ Product

Only parent and child levels.
No grandchildren.

Three-Level Hierarchy

Parent
  └─ Child
      └─ Grandchild

Full three-level structure.

Four+ Level (Advanced)

Level 1
  └─ Level 2
      └─ Level 3
          └─ Level 4

Some applications support more than 3 levels.
Check your specific application.

Tips for Hierarchy Navigation

✅ Always select parent first → Then children appear

✅ Use search → To find specific parent quickly

✅ Notice the breadcrumb → Shows your current path (if available)

✅ Check before deleting → Understand what depends on what

✅ Add at the right level → Child form in child area, not parent area

Next Steps

Key Takeaway: Hierarchies organize data in levels. Select a parent, see its children. Select a child, see its grandchildren. Natural navigation structure.