Page Menus & Dropdowns

What You'll Learn

In this guide, you'll discover how to create an intuitive navigation system for your Knack app through Page Menus and Dropdowns. You'll learn to customize menu appearance, organize pages logically with dropdowns, and control menu visibility based on user roles - all essential skills for creating a user-friendly application that's easy to navigate.

What are Page Menus?

The Page menu is the primary navigation that appears at the top of your Live App. It includes links to each of your starting pages, enabling users to navigate seamlessly between the main sections of your app.

The page menu remains visible regardless of which page is being viewed, unless you've specifically disabled it or the user lacks permission to access certain pages.

Here's an example of a page menu from the Project Management Database sample app when logged in as an Admin:

Note: The Page Menu is separate from the user menu in the top-right corner of the Live App.

Activating Page Menus

By default, the page menu is enabled for every starting page added to your app. You can enable and disable the page menu at any time from your App Settings.

To manage the page menu:

1. Go to the Settings section of the Builder
2. Select "App Settings"
3. Choose "Live App Design"
4. Select "Header & Page Menu"

Managing Page Menus

Adding Links

To include a new link in your page menu, simply add a new page to your app. The page menu will display a link for each starting page in your Live App.

To add a new page, click the "+" button in the Pages section of the Builder. This will open a dropdown menu with options to add:

• Public Page: A page that doesn't require login
• Protected Page: A page that requires users to log in, with options to choose which user roles can access it
• Dropdown Menu: A feature to organize related pages into a dropdown for better navigation

Note: New pages are automatically added as the last link in the page menu.

Hiding Individual Links

You may not want every page to be visible in the page menu. To hide a page:

1. Open the page's Settings tab
2. Uncheck the "Include this page in the Page Menu" option

Note: The Page Menu only includes start pages.

Hiding the Page Menu from a Page

To hide the entire page menu from a specific page:

1. Open the page's Settings tab
2. Uncheck the "Display the Page Menu when viewing this page" option

Changing the Order of Links

To reorder page menu links, simply rearrange the starting pages in your pages tree by dragging and dropping them to new positions.

Adding Icons

Add visual cues to your navigation by including icons in your page menu links:

1. Open the page settings (click the dropdown arrow next to the page name)
2. Select the "add icon" link
3. Choose an icon and set its alignment (left or right of the text)

Dropdown Menus

Dropdown menus allow you to group related pages together, creating a more organized navigation structure.

Adding a Dropdown Menu

To create a dropdown menu:

1. Go to the Pages section and click the "+" button above the page list
2. Select "Dropdown Menu"
3. Check the starting pages you want to include
4. Click "Continue"
5. Name your dropdown menu
6. Click "Add Page"

Notes:

• A page can only belong to one dropdown menu
• Pages added to a dropdown menu will appear there even if their individual "Include this page in the Page Menu" setting is disabled

Managing Dropdown Menus

To modify an existing dropdown menu:

1. Click on the dropdown menu in the page tree
2. Edit the pages displayed in the dropdown on the right side
3. Or access "Settings" to change the dropdown name, menu visibility, or add an icon

Note: To change the order of pages in a dropdown menu, remove the pages and then reselect them in your desired order.

Deleting a Dropdown Menu

To remove a dropdown menu:

1. Click the downward arrow button beside the Dropdown Menu in the page tree
2. Select "Delete"

Note: Deleting a dropdown menu does not delete any pages from your application.

User Roles and the Page Menu

If your app uses user roles, you can configure the page menu to show links based on user permissions:

• When users log in, they only see page links for pages they can access
• They also see links for any public pages that don't require login

To enable or disable user-based page links:

1. Go to the app's Settings section
2. Navigate to Live App Design > Header and Page Menu
3. Edit the "Page Menu Options"

Note: If a user has access to only one page, the page menu won't appear by default. To ensure the page menu displays for all users, include a homepage that all users can access. This ensures each user role has at least two accessible pages, guaranteeing the display of a page menu.