# 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.*