Links

Want to make screen navigation easy and intuitive? Check out our linking guide below.

Link actions let you connect screens together and open external content from your app. When you add a Link action to a component (like a button, list item, or icon), you choose where the user goes when they tap it.

---

Types of Links

• Existing Screen

  • Link to any existing screen in your app. This is the most common link type. Use it to connect your navigation, like linking a list item to a detail screen or a button to a settings page.

• New Screen

  • Link to a screen that doesn't exist yet. Select "New Screen..." from the Link action menu, name the screen, and pick a template. The link action automatically connects to your new screen once it's created.

• Back

  • A special link that returns the user to whatever screen they came from. This is most commonly used with a back arrow icon in an app bar.

  • Back links are especially useful when a screen can be reached from multiple places in your app, since the link always returns the user to the correct previous screen. The transition animation automatically reverses whatever transition brought the user to the current screen.

• Website (External Links)

  • Opens a URL outside your app. This includes:

    • Websites -- opens in a new browser tab (or in-app browser on mobile)

    • Email -- use a mailto: URL to open the user's email app

    • Phone -- use a tel: URL to open the phone dialer

    • Text message -- use an sms: URL to open the messaging app

    • Messaging apps -- use platform URLs to open WhatsApp, Telegram, and others

  • External links support Magic Text, so you can build dynamic URLs using data from your app.

  Learn more about External Links →

  Learn more about Special Links →

---

Transitions

With Link Actions, you can also specify the type of transition the user sees when the move from one page to the next. For example, the screen could slide to the left or come up from the bottom. By default the transition will be set to push, which is the most commonly used. If you are linking to a Modal, you should select the transition type of -- you guessed it -- Modal.