Creating Pages and Navigation

Deployment and publishing

Quick summary: Create multiple pages with navigation, menus, and routing for a complete multi-page application.

Introduction to navigation

This tutorial teaches you how to create multiple pages in your Luna Park application and build a navigation system to move between them.

1. Creating pages

The simple rule

To create a page: Create a component and set its Type to Page

Creating your home page

1. Create a component and rename it "home"
2. Set Type to Page
3. Add Custom Text: "This is the home page"
4. Path: Leave empty (empty path = default home page at "/")

Creating an options page

1. Create a component and rename it "options"
2. Set Type to Page
3. Set Path to "option" (this makes it accessible at "/option")
4. Add Custom Text: "Options page"

Understanding URLs

• Home page: Your browser URL will end with "/"
• Options page: Your browser URL will end with "/option"

2. Reusable Menu component

Building a reusable menu

1. Create a new component called "menu"
2. Add Widget → Header Menu (a pre-built navigation component)
3. Set Layout to Stretch so it fills the available space

Setting up navigation links

The "links" property expects an array of link objects:

First link:

• Label: "Home" (what users see)
• Target: "/" (where it goes - the root page)

Second link:

• Label: "Options" (what users see)
• Target: "/option" (where it goes)

Smart navigation features

• The current page link is automatically highlighted in blue
• Luna Park automatically detects which page you're on - no extra work needed!

3. Menu integration

Adding the menu to your home page

1. Add your Menu component to the home page
2. Notice "Home" appears in blue because it's the active page

In Options page

1. Add Menu component
2. "Options" appears in blue (active page)

Testing navigation

Switch to Preview mode and click the navigation links - you'll see the page content change automatically!

4. Alternative menu options

Alternative: Side Panel navigation

Try Layout → Side Panel widget for a left sidebar navigation instead of a top menu

Individual navigation links

Use Navigation → Router Link to create standalone navigation links within your content

Router Link example

1. Add a Router Link widget
2. Set the text to "Hello World"
3. Set the target property to "/option"
4. Result: Clicking this text takes you to the options page

Routing concepts

How Luna Park routing works

• "/": The default home page (empty path)
• "/option": A specific page (defined by the path property)
• Key concept: The Path property in your page component determines its URL

Built-in navigation features

• Browser URL updates automatically when navigating
• Active states highlight current page automatically
• Browser back/forward buttons work as expected

Navigation types

• Header Menu: main horizontal navigation
• Side Panel: sidebar navigation
• Router Link: contextual links in content

System advantages

Reusability

• Menu component usable everywhere
• Centralized configuration of links
• Automatic consistency of interface

Simplicity

• No complex routing code required
• Automatic detection of active state
• Clean URLs and SEO-friendly

Flexibility

• Multiple menu types available
• Customization via properties
• Easy extensibility for new pages

Best practices

Naming

• Page components: descriptive names (home, options)
• Paths: short and explicit
• Menu labels: clear for users

Organization

• Menu in all pages for consistent navigation
• Logical URL structure
• Reusable components for easy maintenance

Typical structure

• / → Home page
• /about → About
• /contact → Contact
• /products → Products
• /admin → Administration

Next: Configuration files and stores for centralized data management.