Docs
BlupLearnSupportDownload
  • Home 🏠
  • Wiki
    • Design (UI) ✏️
      • Blup Top Bar
      • Blup Menu Bar
      • Pages/Layers Panel
      • Toolkit
      • Insert Panel
        • TextField Widget
        • Progress Widget
        • FAB Widget
        • Icon Widget
        • Lottie Animation Widget
        • Text Button Widget
        • Appbar Widget
        • Checkbox Widget
        • Switch Widget
        • Slider Widget
        • Radio Widget
        • Progress bar Widget
        • Multi choice dialog Widget
        • Web View Widget
        • Camera View Widget
        • Map View Widget
        • Date Picker Widget
        • Time Picker Widget
        • IOS Date Picker Widget
        • IOS Timer Widget
        • Alert Dialog box Widget
        • Dropdown Menu Widget
      • Properties Panel
        • Pages Properties
        • Text Properties
        • List Properties
        • Rectangle Properties
      • Page Canvas
      • Choose from Assets
      • Right-Click Menu in Design
      • How to use navigate page in Blup
    • Logics ⚡
      • UI Nodes
        • Rectangle UI Node
        • Text UI Node
        • Group UI Node
        • List UI Node
        • Page ListView UI Node
      • Helper Nodes
        • Boolean Nodes
        • Date Time Nodes
        • Double Nodes
        • Duration Nodes
        • Integers Nodes
        • Json Nodes
        • List Nodes
        • Map Nodes
        • String Nodes
      • Variables Node Section
      • Function Node Section
      • Maths Node Section
      • Flow Control Section
      • Relational Operators Section
      • Logical Operators Section
      • System Node Section
      • SDK Library Section
      • Blup Sheet API Node Section
    • Backend 🔗
      • Sheets
      • SQL
    • Blup Code Editor
      • File Explorer
      • Editor Area
    • Publish to stores 🚀(Ship)
      • iOS Cloud Build 😮‍💨
        • Configure ⚙️
        • Run ▶️
      • Play Store
    • Build Your First App
      • TODO App
  • Blup Settings
  • Import from Figma
  • How to use WebView in Blup
  • How to use Google Maps in Blup
  • How to use the camera in blup?
  • How to add Splash screen in Blup?
  • How to know Debug prints in blup
  • How to use Google sign in in Blup
  • Creating sign up/ sign in in Blup
Powered by GitBook
On this page
  • Navigation to the Page
  • Advanced Navigation Techniques
  • Music to go with.

Was this helpful?

Edit on GitHub
  1. Wiki
  2. Design (UI) ✏️

How to use navigate page in Blup

Learn to navigate between pages efficiently in Blup to create seamless user experiences.

PreviousRight-Click Menu in DesignNextLogics ⚡

Last updated 10 months ago

Was this helpful?

Navigating between pages efficiently in Blup is essential for creating a seamless user experience. This guide will walk you through the steps to set up navigation in Blup, ensuring your UI is intuitive and user-friendly.

Navigation to the Page

To navigate between pages in Blup, follow these steps:

  1. Select the Element for Navigation

    • Begin by selecting the UI element you want to use for navigation. This could be a button, a link, or any interactive component within your design.

  2. Add Logic to the Element

    • Right-click on the selected element and choose "Add Logics" from the context menu. This action opens the logic editor where you can define the behavior of the element.

  3. Attach an "On Click" Event

    • In the logic editor, attach an "On Click" event to the selected element. This event will trigger the navigation action when the user interacts with the element.

  4. Connect to the Page Navigator

    • Next, connect the "On Click" event to the page navigator. The page navigator is a tool within Blup that manages the transition between different pages in your design.

  5. Choose the Destination Page

    • Finally, from the dropdown menu in the page navigator, select the destination page you want to navigate to. Ensure that the destination page is correctly linked to provide a smooth transition.

Advanced Navigation Techniques

Blup also offers advanced navigation techniques for more complex applications:

  • Dynamic Navigation

    Set up dynamic navigation to direct users based on specific conditions or user actions. For example, you can navigate users to different pages based on their input or choices made earlier in the application.

  • Nested Navigation

    If your application has a hierarchical structure, use nested navigation to allow users to move between parent and child pages seamlessly. This is particularly useful for applications with multiple layers of content.

  • Custom Animations

    Enhance the user experience by adding custom animations to page transitions. Blup allows you to define how pages appear and disappear, adding a layer of polish to your application.

Community and Support

Music to go with.

Lofi music

If you have any ideas to make Blup better, you can share them through our . Engaging with the community can provide additional tips and best practices from other Blup users.

Discord community channel
Navigation to the page
Naviagtion to the page