Menu Module

The Menu module in PAP lets you create structured navigation for your app, helping users move smoothly between pages and subpages. It supports full customization layout, alignment, spacing, colors, and typography, so the menu fits seamlessly with your app’s design and function.

Written By Yasaman Shad

Last updated 5 months ago

Accessing the Button Module

  1. Open an app in PAP.

  2. Click the Add Items button in the top navigation bar or use the “+” signs on the canvas.

  3. In the left-side New Items pane, locate the Menu module.

  4. Drag it onto your app canvas. Once placed, click it to open the Menu Properties Pane.

Menu Properties and Settings

The properties pane provides full control over how the menu appears and behaves.

1. Menu Settings

Type

  • Auto – Adjusts based on screen size and layout.

  • Collapsed – Hidden by default, expands on click (hamburger).

  • Expanded – Always visible.

Direction

  • Set menu orientation: Horizontal (→) or Vertical (↓).

Fill

  • Add a background color to the menu area. Use presets, custom HEX codes, or select from the color wheel.

Spacing

  • Adjust the inner and outer space between items.

Alignment

  • Horizontal: Left, Center, Right.

  • Vertical: Top, Center, Bottom.

2. Menu Item Settings

Size

  • Auto or custom dimensions for each menu item.

Style

  • Define how menu items look in different states:

    • Normal: Default state.

    • Hover: When a user hovers over.

    • Focus: Active or selected state.

Typography

  • Presets: Quickly apply predefined text styles such as Paragraphs, Titles, or Subtitles.

  • Custom Settings: Fine-tune your text by adjusting the font, weight (boldness), size, line height, and letter spacing.

  • Case: Choose how your text is capitalized: UPPERCASE, lowercase, Sentence case, or None.

  • Text Color: Select a color from presets or enter a custom HEX value for full control.

  • Fill: Apply a background color behind each menu item for added emphasis or contrast.

3. Submenu Settings

Start Point

  • Root: Displays only top-level pages.

  • Page: Starts from a chosen page, showing its subpages.

Max Level

  • Controls how many child page levels are displayed.

Fill

  • Set background color for submenu items.

Use Cases

  1. Enable Seamless Navigation

  2. Customize Menu Appearance and Behavior

  3. Manage Submenu Hierarchy

  4. Enhance User Interaction with Styles