Skip to content
Docs
    Menu

    The editor

    The Navigator

    How to use the Navigator's layer tree to select, reorder and delete things on the current page.

    The Navigator shows the current page as a tree: sections, the components inside them, and the elements inside those. Open it from the left icon rail.

    Select something

    Click a row to select that element on the canvas. Hovering over a row highlights it on the canvas, and selecting something on the canvas opens the tree to its row.

    Use the buttons in the panel header to Open all or Close all rows. Click the arrow on a row to expand or collapse it.

    Reorder by dragging

    1. Hover over a row. A drag handle appears on its left.
    2. Drag the row up or down. A line shows where it will land: before or after another row, or highlighted to drop inside it.
    3. Release to move it.

    You can drag components and elements. You can't drag the header or footer, and you can't move anything above the header or below the footer.

    Delete

    Hover over a row and click the trash icon (Delete). Confirm in the dialog, which reminds you You can undo this. Press Cmd/Ctrl+Z to bring it back.

    What the rows and badges mean

    You see Meaning
    A name in bold color A component, such as Hero or Footer.
    <div>, <h2> and so on An HTML element. Its text, if any, follows in grey.
    {…} A value filled in by code.
    ×3 (any number) This part repeats once per item in a list, and the list has that many items right now.
    if This part only shows in certain cases, depending on your content.
    locked A component Starjay manages, such as a form. You can't add or remove things inside it.
    CMS This part shows content from a CMS collection.
    Link icon Shared component — edits affect every page.

    While the AI is working, the Navigator is dimmed and you can't change anything.

    Related