Experimental Navigation: Canvases, Folding Pages and Sites Without a Navbar

For about twenty years most websites have opened the same way: logo top left, five or six links across the top, a button on the right. It works, and nobody has to learn it. That is exactly why a growing number of studios, launches and portfolios are throwing it out.

The replacements vary. Some sites drop you onto a huge canvas you pan around and zoom into. Some stack pages like sheets of paper that fold away as you move. Others turn scrolling itself into the route through the site. I’ve built a few of these and talked clients out of a few more, so this is my take on when they earn their place and how to build one without locking people out.

What the new formats look like

• Zoomable canvases. The whole site is one big surface, a bit like a Figma file or a map. Projects or sections sit at different points. You zoom out to see everything, then zoom in to read one thing.
• Folding and stacked pages. Pages sit on top of each other and fold, slide or peel back as you go deeper. Going back reverses the motion, so you keep a sense of where you came from.
• Scroll-driven journeys. There is no menu at all. The page is a sequence, and scrolling moves you through it. Progress markers stand in for the navbar.
• Spatial or room-based layouts. Sections sit side by side, and you move between them with arrows, keys or drags, the way you’d move between rooms.
• Command-style navigation. A search or command bar (often opened with / or Cmd+K) replaces the list of links. Developers love it. Most other visitors never find it.

Why designers are moving away from the navbar

Part of it is fatigue. When every template ships the same header, a site that opens differently gets remembered. For a design studio or a creative portfolio, being remembered is the brief.

The other part is that the browser can now do much more of this natively. CSS scroll-driven animations, view transitions between pages, :has() and container queries let you build motion and state changes that used to need a heavy JavaScript library. That makes experimental navigation cheaper to build and lighter to load than it was five years ago. I wrote about that shift in CSS is eating JavaScript’s lunch.

Where it goes wrong

Most of the experimental sites I audit share the same handful of problems.

• People can’t find things. A canvas is fun for the first thirty seconds. After that, someone looking for your contact details is hunting across a map with no labels.
• The back button breaks. If moving around the canvas doesn’t change the URL, pressing back throws the visitor off the site entirely.
• Nothing has its own address. You can’t share a link to one project, and search engines see a single page instead of twenty.
• Keyboards and screen readers get stuck. Drag-to-pan and pinch-to-zoom mean nothing to someone using Tab and Enter, and a screen reader announces a wall of unlabelled shapes.
• Motion makes people feel ill. Large zooms and folds can trigger vestibular symptoms. That’s why operating systems have a reduce-motion setting.
• Crawlers see nothing. If the content only renders after a WebGL scene loads or a gesture fires, many crawlers, including most AI crawlers, get an empty page.

How to build it so it still works

The approach I use is to build a plain, boring site first and put the experiment on top of it. In practice that means:

• One URL per destination. Every project, section or “room” gets its own path. Zooming into a project updates the address bar, and loading that address opens the canvas already zoomed in. The back button then works for free.
• Real links in the HTML. Each destination is an <a href> somewhere in the markup, even if the visual design hides the list. Crawlers follow links, not drag gestures.
• A visible way out. Keep a small, always-available index, a “Menu” or “All work” button that opens a plain list. Visitors who just want the phone number get it in one click.
• Keyboard paths. Arrow keys pan, + and - zoom, Tab moves between destinations in a sensible order, and focus is always visible.
• Reduced motion. Under prefers-reduced-motion: reduce, swap zooms and folds for a simple fade or an instant cut.
• Server-rendered content. Render the text and images in HTML first, then let the canvas or the folds pick them up. If the fancy layer fails, the page still reads.

None of this kills the effect. A visitor who never touches the menu still gets the canvas. It just means the canvas isn’t the only way in.

When it’s worth doing, and when it isn’t

Good fits:

• Portfolios and studio sites, where the navigation is part of the work being shown
• Product launches and campaign microsites with one story to tell
• Brand storytelling, annual reports and editorial features
• Galleries and archives where browsing is the main activity

Poor fits:

• Service businesses whose visitors want a quote, a price or a phone number
• Ecommerce category pages and checkout
• Documentation, support and anything people search for in a hurry
• Sites where most traffic lands deep from Google rather than on the home page

A middle path works well for many businesses: keep the standard header on the working pages, and save the experimental format for one place, such as the home page, a case study or a launch page. You get the memorable first impression without asking someone to learn a new interface just to find your opening hours.

Measuring whether it works

Opinions about experimental navigation tend to run hot, so measure it. Before launch, decide what a visitor should be able to do, such as reaching a case study or the contact form. Then watch:

• How many visitors reach those pages, compared with the old site
• How often the fallback menu gets opened (a lot means the main navigation isn’t doing its job)
• Time to first meaningful click, from session recordings
• Interaction to Next Paint (INP) on mobile, since heavy canvases often hurt it

If people reach the pages that matter and stay longer, keep it. If the fallback menu is doing all the work, the experiment is costing you.

Frequently Asked Questions

What is experimental navigation?
Any way of moving around a site that replaces the standard top navbar, such as zoomable canvases, folding pages, scroll-driven journeys or spatial layouts.

Is a site without a navbar bad for SEO?
Not if every section has its own URL and a real link in the HTML. Content that only appears after a gesture or a script is the problem.

Can it be accessible?
Yes, with keyboard controls, real links for screen readers, visible focus, reduced-motion support and a plain fallback menu.

When should a business avoid it?
When visitors arrive with a task to complete quickly. Keep experiments for portfolios, launches and brand stories.