---
title: "Page tree"
manual: "Getting Started"
version: "main"
permalink: "https://docs.typo3.org/permalink/t3start:page-tree@main"
source: "Concepts/Backend/GeneralBackendStructure/PageTree/Index.rst"
modified: "2026-09-15T08:44:38+00:00"
---

# Page tree

The page tree represents the hierarchical structure of your site and its pages. In
most cases this corresponds exactly to the navigation structure
of your website. The page tree can be expanded by clicking
the arrow to the left of each page.

1.  [Enter the backend](https://docs.typo3.org/permalink/t3start:backend-login@main) and select the **Content > Layout** module

    Click on **Content > Layout** now.
1.  Look at the page tree in the backend:

    For example, click on the arrow next to the page called "Congratulations",
    and then "Content Examples".

    Your page tree should look like this:

    ![](../../../../Images/ManualScreenshots/PageTree/PageTree.png)
1.  View page in the frontend:

    To view the page in the frontend, click on the **View webpage**
    icon in the Docheader.

    ![](../../../../Images/ManualScreenshots/Modules/Layout/ViewWebpage.png)
1.  Now take a look at the navigation in the frontend.

    Click on **CONTENT EXAMPLES** in the main menu on top and then
    select **Media** from the sub-menu:

    ![Frontend of the Introduction Package](../../../../Images/ManualScreenshots/Frontend/FrontendPage.png)

The main menu on top of your website corresponds to the first
level menu pages in the page tree. The sub-menu of the **"Content Examples"**
page in the frontend corresponds to the entries beneath "Content Examples" in the page tree.

## Working with the page tree

We will now look at some components of the page tree a little more closely:

-   **Root page**

    The page with the globe icon represents the root of your website.
    Multiple websites can exist within a single installation of TYPO3.
    The top node with the TYPO3 logo is a special container which is used
    to store shared resources such as file mounts and backend user records.

![](../../../../Images/ManualScreenshots/PageTree/RootPage.png)

-   **Modules:**

    Some modules make use of the page tree, but not all. The presence of the page tree
    implies that the module depends upon the selection of a specific page in the page tree.

-   **Content area:**

    Clicking on a page's title opens that page in the content area to
    the right. Hovering over the icon of a page will display its internal id.

-   **Context menu:**

    A click on the page icon will open the context menu. **Or**, you
    can right click on the whole page title.

    ![](../../../../Images/ManualScreenshots/PageTree/ContextMenu.png)

## The context menu

The context menu of a page is used to access the most common
page related functions. Here is what these options do:

-   **Show**: Opens the page you clicked in the browser (frontend)
-   **Edit**: Lets you edit the page properties
-   **New**: Create a new page

> [!IMPORTANT]
> This creates a new page under the current page on the same level in the page
> tree:
>
> ```none
> parent
>  |
>  ---> current page
>  |
>  ---> new page
> ```
>
> If you wish to create a new page as a subpage of the current page, use "More options"
> \> 'Create New' wizard" or use [Create new pages with drag and drop](https://docs.typo3.org/permalink/t3start:new-page-drag-and-drop@main).
>
> ```none
> parent
>  |
>  --> current page
>       |
>       ---> new page
> ```

-   **Info**: Displays information about the page
-   **Copy**: Copies the page
-   **Cut**: Cuts the page
-   **More options**:

    -   **More options ... > 'Create New' wizard**: Same as "New", but you can select where
        the new page is to be created.
    -   ...
    -   **More options ... > Export**: Opens the export tool and preselects the selected page
    -   **More options ... > Import**: Opens the import tool and preselects the selected
        page
-   **Enable** or **Disable**: Enables or disables the page depending on its current state.
    Disabled pages can be edited as normal, but are not accessible from the frontend.
-   **Delete**: Deletes the page
-   **History/Undo**: Shows the change history of the page (who did which
    changes when)

## Create new pages with drag and drop

You can also create new pages using drag and drop.

1.  Clicking on the "Create new pages" icon (top left of the page tree)
1.  Drag and drop a "Standard" page to its desired location in the page tree.

    ![](../../../../Images/ManualScreenshots/PageTree/Dragndop1.png)

    ![](../../../../Images/ManualScreenshots/PageTree/Dragndop2.png)
1.  A new page has now been created at the desired location.

    By default it will be called "\[Default Title\]" which can be changed
    right away by entering a new title.

    ![](../../../../Images/ManualScreenshots/PageTree/Dragndop3.png)

## The view module

It is also possible to view a page without having to leave the backend. By selecting the View module,
backend users are able to preview individual pages and test them against various screen sizes,
by accessing the drop-down menu at the top.

![Viewing a page directly in the backend](../../../../Images/ManualScreenshots/Modules/ViewModule.png)

## Collapsing the page tree

The page tree can be collapsed to gain screen space, by clicking on the second icon
on the left in the top bar.

![](../../../../Images/ManualScreenshots/PageTree/CollapsePageTree.png)

## Editing pages

Modifying an existing page or adding a new one is covered in the
[Editors Tutorial](https://docs.typo3.org/m/typo3/tutorial-editors/main/en-us/Pages/Index.html#pages).

Next we will look at how content is placed on pages.