Page Hierarchy & Tree

Master the page tree to organize your content effectively.

---

What Is the Page Tree?

The page tree is a hierarchical view of all your pages, shown in the left sidebar. It works like a file system:

📄 Root Page
  📄 Child Page
    📄 Grandchild Page
  📄 Another Child
📄 Another Root Page

Think of it like:

• Folders and files
• Book chapters and sections
• Website navigation

---

Understanding Hierarchy

Levels

Pages can have multiple levels:

Level 1: Root Pages

• Top-level pages
• No parent
• Main categories

Level 2: Child Pages

• One level deep
• Have a parent
• Subcategories

Level 3+: Nested Pages

• Multiple levels deep
• Grandchildren, great-grandchildren, etc.
• Specific topics

---

Example Hierarchies

Product Documentation:

📄 Product Docs (root)
  📄 Getting Started
    📄 Installation
    📄 Quick Start
    📄 First Steps
  📄 User Guide
    📄 Basic Features
    📄 Advanced Features
  📄 API Reference
    📄 Authentication
    📄 Endpoints

Team Wiki:

📄 Engineering
  📄 Backend
    📄 API Design
    📄 Database
  📄 Frontend
    📄 Components
    📄 Styling
📄 Product
  📄 Roadmap
  📄 User Research

---

Navigating the Tree

Viewing the Tree

Location: Left sidebar on Pages dashboard and page detail views

Features:

• Expand/Collapse: Click ▸/▾ arrows
• Click to open: Click page name
• Drag handles: Grab ⋮⋮ to reorder
• Action buttons: Duplicate, delete icons

Expanding & Collapsing

Expand a page:

• Click ▸ arrow next to page name
• Shows all child pages

Collapse a page:

• Click ▾ arrow
• Hides child pages

Tip: Collapsed state is remembered per session

---

Creating Pages in the Tree

Adding a Root Page

1. Go to Pages dashboard
2. Use "Create a new page" form
3. Select "Root (no parent)" in dropdown
4. Click "Create & open"

Result: Page appears at tree root

Adding a Child Page

1. Go to Pages dashboard
2. Use "Create a new page" form
3. Select parent page in dropdown
4. Click "Create & open"

Result: Page appears nested under parent

---

Organizing with the Tree

Drag & Drop Reordering

Reorder pages at same level:

1. Hover over page in tree
2. Grab drag handle (⋮⋮)
3. Drag up or down
4. Drop at new position
5. Saves automatically

Move to different parent:

1. Grab page's drag handle
2. Drag over new parent
3. Parent highlights when ready
4. Drop to nest under new parent
5. Confirms with API call

Visual feedback:

• Blue highlight = valid drop zone
• Cursor changes during drag
• Smooth animation on drop

---

Moving Pages

Change page parent:

Method 1: Drag in tree (see above)

Method 2: API (for developers)

• Use /api/pages/[pageId]/move endpoint
• Update parentPageId and sortOrder

---

Duplicating Pages

Quickly copy a page:

1. Find page in tree
2. Hover over page
3. Click 📋 Duplicate button
4. Copy created with "(Copy)" suffix
5. Same parent as original
6. Content fully duplicated

Use cases:

• Template pages
• Recurring meeting notes
• Similar project pages
• Quick starting points

Learn more about duplication

---

Breadcrumbs

What they are: Path showing current location

Where they appear: Top of each page

Example:

Pages > Engineering > Backend > API Design

Features:

• Click any level to navigate
• Shows full hierarchy
• Current page not clickable

Benefits:

• Never get lost
• Quick parent navigation
• Clear context

---

Best Practices

Keep It Shallow

✅ Good: 2-3 levels deep

📄 Product
  📄 Features
    📄 Authentication

❌ Too deep: 5+ levels

📄 Company
  📄 Departments  
    📄 Engineering
      📄 Teams
        📄 Backend
          📄 Services

Why: Deep nesting is hard to navigate

---

Group Related Content

✅ Good grouping:

📄 Q4 2024
  📄 OKRs
  📄 Projects
  📄 Retrospectives

❌ Poor grouping:

📄 Random Stuff
  📄 Meeting Notes
  📄 API Docs
  📄 Lunch Ideas

---

Use Consistent Names

✅ Consistent:

📄 Sprint 23 Planning
📄 Sprint 23 Review
📄 Sprint 23 Retrospective

❌ Inconsistent:

📄 Sprint 23 - Planning
📄 Review for Sprint 23
📄 Sprint23_retro

---

Alphabetical or Logical Order

Alphabetical: Easy to find

📄 Components
  📄 Button
  📄 Card
  📄 Input
  📄 Modal

Logical: Follows workflow

📄 User Journey
  📄 1. Discover
  📄 2. Sign Up
  📄 3. Onboarding
  📄 4. First Use

Choose one and stick with it!

---

Common Patterns

Project Structure

📄 [Project Name]
  📄 Overview
  📄 Requirements
  📄 Design
  📄 Implementation
  📄 Testing
  📄 Launch

Time-Based

📄 2024
  📄 Q1
    📄 January
    📄 February
    📄 March
  📄 Q2
    📄 April
    📄 May
    📄 June

Feature-Based

📄 Authentication
  📄 Login
  📄 Registration
  📄 Password Reset
  📄 OAuth

Team-Based

📄 Engineering Team
  📄 Backend Team
    📄 Team Members
    📄 Projects
    📄 Meetings
  📄 Frontend Team
    📄 Team Members
    📄 Projects
    📄 Meetings

---

Advanced Features

Sorting

Current: Manual drag-and-drop Future: Automatic sorting options

For now: Maintain order manually by dragging

Filtering

Not yet available, but coming:

• Filter by tag
• Search within tree
• Show only favorites

Bulk Operations

Not yet available, but planned:

• Move multiple pages
• Delete multiple pages
• Duplicate multiple pages

---

Keyboard Shortcuts

Action	Shortcut
Navigate to Pages	Click "Pages" in sidebar
Open page	Click page name
Create new page	Use form on dashboard
Duplicate page	Click 📋 button

Note: No keyboard shortcuts for tree navigation yet

---

Troubleshooting

Can't see child pages?

Check: Is parent collapsed (▸)? Solution: Click ▸ to expand

Page in wrong location?

Solution: Drag to correct parent

Drag not working?

Check:

• Hovering over page shows ⋮⋮?
• You're grabbing the handle?

Solution:

• Hover first
• Click and hold ⋮⋮
• Then drag

Lost a page?

Check:

• Expand all parents
• Check Recent pages
• Use breadcrumbs from any child

---

Tips & Tricks

Favorite Important Pages

• Don't navigate tree for common pages
• Use Favorites instead
• Keep tree for browsing/organization

Use Root for Main Categories

• Keep root level clean
• 5-10 main categories max
• Everything else nested

Plan Before Building

Before creating many pages:

1. Sketch structure on paper
2. Define main categories
3. Plan 2-3 levels
4. Then build in app

Regular Maintenance

Weekly or monthly:

• Review tree structure
• Move misplaced pages
• Archive old content
• Rename for clarity

---

Related Guides:

• Creating Pages
• Moving & Duplicating Pages

• Breadcrumbs & Navigation