Navigation

Figdown supports multi-page wireframes. Each page is a separate Figdown document. The playground has a built-in router that loads pages and wires links between them.

Declaring pages

Use the pages: meta key at the top of your root document to declare all pages in the project.

pages:
  - home
  - about
  - contact

Each name maps to a Figdown file: home.figdown, about.figdown, contact.figdown.

Linking between pages

Use → /page-name on any element to link to another page.

nav:
  logo: My App
  link: Home → /home
  link: About → /about
  link: Contact → /contact

button: Get Started → /signup

The playground router intercepts these clicks and loads the target page instead of following the URL.

How the router works

1. The playground loads the root document first.
2. Clicking a → /page-name link loads that page's Figdown file and re-renders the preview.
3. The browser's back and forward buttons navigate through page history.
4. The current page name is shown in the playground's address bar as a hash: #/about.

Destinations summary

Syntax	Meaning
→ /page-name	Navigate to another page
→ #section-id	Scroll to an anchor on the current page
→ [modal: name]	Open a named modal
→ [section: name]	Jump to a named section