Tree View

Tree View

VertiTab’s Tree View organizes your tabs in a hierarchical structure based on their relationships, making it easier to understand how tabs are connected and manage related content together.

::: info Login Required Tree View is available for free with a registered account. No premium subscription is required to use this feature. However, advanced customization options require a premium subscription. :::

How to Enable Tree View

1. Open VertiTab’s sidebar panel
2. Click the Display Mode button in the toolbar
3. Select Tree View from the dropdown menu

Understanding Tree Structure

Tree View is built on the concept of openerTabId - a browser property that tracks which tab opened another tab. This creates natural parent-child relationships:

Tree Components

• Root Tabs: Tabs that weren’t opened by another tab, or whose parent tab no longer exists
• Child Tabs: Tabs that were opened by clicking links or using “Open in new tab” from another tab
• Tree Hierarchy: Multiple levels of relationships where child tabs can have their own children

Visual Representation

• Tree Lines: Connecting lines show the relationship between parent and child tabs
• Indentation: Child tabs are indented to show their level in the hierarchy
• Expand/Collapse Icons: Click to show or hide child tabs of a parent

Manual Tree Building

You can manually create tree relationships by dragging tabs onto each other. When you drag a tab over another tab, a hover menu appears with options:

Available Actions

• Move Tabs: Moves the dragged tab(s) to be positioned near the target tab
• Add to Group: Creates or adds tabs to a tab group
• Group Tabs as Tree: Creates a parent-child relationship between the dragged tab(s) and the target tab

Drag & Drop Tree Building

1. Drag to Create Parent-Child: Drag a tab onto another tab and select “Group Tabs as Tree” to make the target tab the parent
2. Multi-Tab Tree Building: Select multiple tabs, then drag them onto a target tab to create multiple children under one parent
3. Tree Reorganization: Drag tabs within the tree to reorganize the hierarchy

Group vs Tree Priority

The Prefer Tab Groups Over Tree Structure setting determines how Tree View handles tab groups:

Group Priority (Default: Disabled)

When disabled (tree priority):

• Tree relationships are maintained across tab groups
• Parent-child relationships are preserved even when tabs are in different groups
• Focus is on the tree structure rather than group organization

Group Priority (When Enabled)

When enabled (group priority):

• Tree relationships are limited to tabs within the same group
• Moving tabs between groups breaks parent-child relationships
• Groups take precedence over tree structure
• Tabs maintain tree relationships only with other tabs in their group

New Tab Behavior

The tabTreeIgnoreOpenerOnNewTab setting controls whether new tabs automatically establish parent-child relationships:

Default Behavior (Setting Disabled)

• New tabs opened from existing tabs automatically become children of the opener
• Creates an automatic tree structure based on browsing behavior

Independent New Tabs (Setting Enabled)

• New tabs are created as independent root tabs
• No automatic parent-child relationships are established
• Useful for users who prefer manual tree organization

Advanced Customization (Premium)

With a premium subscription, you can customize the visual appearance of Tree View:

Tree Lines

• Style: Choose from solid, dashed, dotted, or no lines
• Width: Adjust the thickness of connecting lines
• Color: Set custom colors for tree lines (or use random colors)
• Opacity: Control transparency of tree lines

Tree Icons

• Icon Type: Choose from square, circle, arrow, triangle, or folder icons
• Hover Display: Show expand/collapse icons only on hover

Spacing and Layout

• Horizontal Indent: Adjust the horizontal spacing between tree levels
• Vertical Indent: Control the vertical spacing between tree items

Behavior Options

• Close Tree with Parent: When enabled, closing a parent tab automatically closes all its children
• Sort by Relationships: Automatically organize tabs based on their tree relationships in the browser

Tips for Effective Tree Usage

1. Natural Browsing: Let Tree View automatically organize tabs as you browse - opening links in new tabs creates natural hierarchies

2. Manual Organization: Use drag & drop to create logical groupings when automatic relationships don’t match your mental model

3. Combine with Groups: Use both tree structure and tab groups for maximum organization - trees for relationships, groups for topics

4. Clean Up Regularly: Remove unnecessary parent-child relationships by dragging tabs to become root tabs

5. Visual Customization: Adjust tree line styles and spacing to match your preferences and improve readability

Tree View transforms tab management from a flat list into an organized hierarchy that reflects how you actually browse and think about related content.