Contextual actions

The user wants to operate on the data at hand without having to navigate to a different screen.

Problem

The user wants to operate on the data at hand without having to navigate to a different screen.

Solution

Contextual actions are usually shown for list items or on button clicks presenting a list of actions related to a specific content on the page.

Show the most relevant actions applicable to the item in focus. These could be most commonly used or situationally relevant actions that can be applied to the data.

Use icons or images and text for the action items. If possible use text along with the icons or images for a better description of the choices. When no text is shown, always choose icons that are obvious to the user.

Use this to provide quick access to common actions and reduce the number of taps the user has to make to get things done.

  • Action sheet
  • Action grid
  • Action menu
Showing 3 live examples
Action sheet
    • 5 Comments
    • Barry Lyon

      Thank you for this and other previous useful contributions. If you have the time and inclination won't you please look into the use of "deep links".

    • Hortense Tinker

      For the past months I've been discovering the cordova / ionic universe and everytime I had a doubt or problem about a funcionality I wanted to add I find out you already made a post about it. Thank you SO much.

    • Carl Hambledon

      Thank you very much for this useful article!!!

    • Arlene Sharman

      This is just what I was looking for, thanks for the article and congratulations because it's very well written

    • Noble Blythe

      This is helpful,and recently i wanna to take a deep dive in the touch events.

    Action sheet
    Action grid
      • 5 Comments
      • Barry Lyon

        Thank you for this and other previous useful contributions. If you have the time and inclination won't you please look into the use of "deep links".

      • Hortense Tinker

        For the past months I've been discovering the cordova / ionic universe and everytime I had a doubt or problem about a funcionality I wanted to add I find out you already made a post about it. Thank you SO much.

      • Carl Hambledon

        Thank you very much for this useful article!!!

      • Arlene Sharman

        This is just what I was looking for, thanks for the article and congratulations because it's very well written

      • Noble Blythe

        This is helpful,and recently i wanna to take a deep dive in the touch events.

      Action grid
      Action menu
        • Music
          • Back
          • Track 1
          • Track 2
          • Track 3
        • Photos
          • Back
          • Image 1
          • Image 2
          • Image 3
        • Videos
          • Back
          • Movie 1
          • Movie 2
          • Movie 3
        • Image 1
        • Image 2
        • Image 3
        • Image 4
        • Image 5
        • File 1
        • File 2
        Action menu
        This example should be experienced in full screen
        View in full screen

        Problem

        The user wants to operate on the data at hand without having to navigate to a different screen.

        Solution

        Contextual actions are usually shown for list items or on button clicks presenting a list of actions related to a specific content on the page.

        Show the most relevant actions applicable to the item in focus. These could be most commonly used or situationally relevant actions that can be applied to the data.

        Use icons or images and text for the action items. If possible use text along with the icons or images for a better description of the choices. When no text is shown, always choose icons that are obvious to the user.

        Use this to provide quick access to common actions and reduce the number of taps the user has to make to get things done.

        Share in SMS
        • SMS