Pages & Navigation

VoxelSite manages your pages and automatically maintains navigation across your site.

Creating pages

There are two ways to create pages:

Through conversation — Tell the AI "Add a team page" or "Create a services page with our three packages." VoxelSite generates the page with content, styling, and navigation entry.

Through the action system — Use the New Page action for a guided flow where you specify page type, content approach, and special requirements.

Editing pages

There are two ways to edit pages:

Through conversation — Select a page from the Pages tab, then describe what you want to change:

• "Add a testimonials section"
• "Replace the hero image with a video background"
• "Rewrite the about section to focus on our 20-year history"

Through the visual editor — Click the Edit button to activate the click-and-edit overlay. Select any element to edit text inline, swap images, or adjust Tailwind styles with a live preview. Changes are saved to the PHP source files just like AI-generated edits.

VoxelSite modifies only the affected files. The preview updates immediately so you can see the result before publishing.

Shared partials

VoxelSite uses PHP partials (_partials/) for elements shared across all pages:

When you change the navigation or footer, VoxelSite updates the partial file. All pages inherit the change automatically — no need to update each page individually.

Navigation

Navigation is managed automatically. When you add or remove pages, VoxelSite updates the nav partial accordingly. You can also:

• Reorder pages — Use the Move action in the Site workspace to change navigation order
• Move pages — Change a page's parent to reorganize your site structure. The file, URL, and all cross-references update automatically
• Hide pages — Remove a page from navigation while keeping it accessible by URL
• Rename nav labels — The navigation label can differ from the page title

Mobile navigation

Every generated site includes a mobile menu that adapts to smaller screens. The AI chooses from several patterns — hamburger toggle, full-screen overlay, slide-in panel, bottom tab bar — based on your site's personality and page count.

VoxelSite applies multiple layers of defense to ensure the mobile menu always works:

1. Structural correction — the engine moves #mobile-menu outside <header> if the AI nests it inside, since backdrop-filter on headers traps fixed-position children
2. Close button injection — if the AI forgets a close button, the engine adds one automatically
3. Padding safety net — at page load, the shipped navigation.js measures the header height and applies matching top padding to the mobile menu, preventing links from hiding behind the sticky header
4. Runtime z-index safety — the script detects layering conflicts and auto-corrects so the toggle button is never buried under the overlay
5. Icon hydration resilience — toggle icons are queried by ID at the moment of use, not cached at page load, so they survive the icon resolver replacing <i> placeholders with <svg> elements
6. CSS specificity safety net — the engine injects .icon.hidden { display: none } to prevent icon display rules from overriding Tailwind's .hidden utility
7. Auto-close on viewport widen — if the mobile menu is open and the viewport widens past the breakpoint where the desktop nav appears, the menu closes automatically to prevent a stuck overlay after device rotation

Animated hamburger

The toggle button uses an animated hamburger icon that morphs into an X when the menu opens. The AI picks a style that fits the site's personality:

The animation runs at 300ms with an expo-out easing curve. The hamburger uses currentColor, so it automatically matches whatever text color the nav uses.

The navigation.js script is included with every generated site and handles open/close toggling, animated hamburger morphing, body scroll locking, and the safety checks above.

Homepage

One page is designated as the homepage (index.php). It's the page visitors see when they go to your domain root. You can change which page is the homepage in the Pages tab.

Deleting pages

Delete a page from the Site workspace. VoxelSite removes the file, cleans up all cross-references (dead links are unlinked, nav entries removed), and updates navigation. A safety snapshot is created before deletion. The page is still recoverable via undo or snapshots.