menu-item

A menu-item is a lightweight list-item designed for quick selection and navigation. It’s ideal for presenting categories, filters, or simple choices that guide you to the next screen or refine the data being displayed. Use a menu-item when you want users to tap an option to view related content, for example, selecting a project, choosing a day of the week, or filtering items by category.

Configuration options

Some properties are common to all components, see Common component properties for the properties and their configuration options.

Core structure
title	Add a title for the menu-item. You can use an expression and datasource to set the title. To apply styling, use Text With Formats or Text With Styles.

Other options
leftElement	Set an element to the left of the list. The following elements are available: avatar - configure the color, size, text, uri, and onPress event. icon - the icon size, color,shape, type, isSubtle (low opacity), and onPress event is configurable. image - the image text, uri, size, shape, resizeMode, and onPress event is configurable.
numberOfColumns	Sets the number of columns used to display items in a multi-column layout. This applies only to vertical lists; it is ignored when isHorizontal is true. This property is set under the data property.
subtitle	An optional line of secondary text displayed beneath the title. To apply styling, use Text With Formats or Text With Styles.

Actions
onPress	The action is triggered while pressing on a menu-item in the list. Use IntelliSense (ctrl+space) to see the list of available actions.

Considerations

• Use menu items primarily for category filtering. A common example is selecting a day of the week to show only the time entries associated with that day.

• The recommended maximum number of columns is 3 on mobile devices and 5 on tablets in landscape for optimal readability and spacing.

• When using an image in the leftElement together with numberOfColumns, the image may expand to fill the entire column, causing the title or subtitle to be hidden.

  • For phones, use an avatar with the image to ensure proper rendering.

  • For tablets, using the image property is supported and renders correctly.

Examples and code snippets

Menu-item with avatar

This example displays a weekly schedule using a menu-item list of weekdays. When you select a day, the jig saves that selection in the dayFilter state and immediately loads the list of employees rostered for that day. The top list shows the days of the week as selectable menu-items, and the second list, visible only after a day is chosen, shows the filtered roster with each employee’s name, role, and avatar. This allows you to quickly tap a day and view who is on duty.

Examples:

See the full example in GitHub.

Menu-item with avatar in two columns

menu-item-avatar.jigx

title: Weekly schedule
type: jig.default

header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1658534983135-d6a899a6dc7e?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YmFja2dyb3VuZCUyMHdvcmt8ZW58MHx8MHx8fDA%3D

onRefresh:
  type: action.reset-jig-state
  options:
    changes:
      - dayFilter
      
onFocus:
  type: action.reset-jig-state
  options:
    changes:
      - dayFilter
state:
  dayFilter:
    initialValue: ""

children:
  - type: component.list
    instanceId: day-roster
    options:
      data: =@ctx.datasources.week-day
      # Display items in a 2-column layout.
      numberOfColumns: 2
      maximumItemsToRender: 8
      item:
        # Render each day as a clickable menu-item.
        type: component.menu-item
        options:
          # Main styled text display configuration.
          title:
            # Show the day name from the current item.
            text: =@ctx.current.item.day
            fontSize: regular
            color: color1
            isSubtle: false
            isBold: true
            numberOfLines: 1
          # Avatar icon displayed on the left side of each menu-item.  
          leftElement:
            element: avatar
            # Display day name initial(s) in the avatar.
            text: =@ctx.current.item.day
            # Color for avatar background.
            color: color3
          # Action triggered when user taps on a day.  
          onPress:
            # Update the jig state when day is selected.
            type: action.set-jig-state
            options:
              changes:
                # Store selected day in 'dayFilter' state variable.
                dayFilter: =@ctx.current.item.day
 
  - type: component.divider
  - type: component.section
    # Only render this list when a day has been selected (dayFilter exists).
    when: =$boolean(@ctx.jig.state.dayFilter)
    options:
      title:
      # Display the selected day name as a section header.
        text: =@ctx.jig.state.dayFilter & " team"
        fontSize: regular
        isBold: true
        transform: uppercase
      children:  
        # List component to display schedule employees based on selected day. 
        - type: component.list
          # Only render this list when a day has been selected (dayFilter exists).
          when: =$boolean(@ctx.jig.state.dayFilter)
          options:
            data: =@ctx.datasources.roster
            maximumItemsToRender: 8
            item:
              type: component.list-item
              options:
                isContained: true
                # Render each employee on duty for that day as a list item.
                title:
                  text: =@ctx.current.item.TechnicianName
                  fontSize: regular
                  isBold: true
                  transform: uppercase
                # Avatar displayed on the left side of each list item.  
                leftElement:
                  element: avatar
                  text: =@ctx.current.item.TechnicianName
                  uri: =@ctx.current.item.avatar
                label:
                  title: =@ctx.current.item.position
                  color: color1boolean(@ctx.jig.state.dayFilter)
    options:
      title:
      # Display the selected day name as a section header.
        text: =@ctx.jig.state.dayFilter & " team"
        fontSize: regular
        isBold: true
        transform: uppercase
      children:  
         # List component to display schedule employees based on selected day. 
        - type: component.list
          # Only render this list when a day has been selected (dayFilter exists).
          when: =$boolean(@ctx.jig.state.dayFilter)
          options:
            data: =@ctx.datasources.roster
            maximumItemsToRender: 8
            item:
              type: component.list-item
              options:
                isContained: true
                # Render each employee on duty for that day as a list item.
                title:
                  text: =@ctx.current.item.TechnicianName
                  fontSize: regular
                  isBold: true
                  transform: uppercase
                # Avatar displayed on the left side of each list item.  
                leftElement:
                  element: avatar
                  text: =@ctx.current.item.TechnicianName
                  uri: =@ctx.current.item.avatar
                label:
                  title: =@ctx.current.item.position
                  color: color1

datasources

Menu-item with icons

This example displays a list of company report categories using menu-items. Each menu-item represents a report type, such as Financial, Employees, Customers, or Sales and includes an icon, a bold title, and a short descriptive subtitle. The list is shown in two columns (numberOfColumns) for a compact, visual layout. When you taps a menu-item, the app navigates to the corresponding report jig defined by the myjig value in the datasource. This layout offers users a simple, intuitive way to browse and open different business reports.

Examples:

See the full example in GitHub.

menu-item-list.jigx

title: Reports
type: jig.list
icon: contact

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://plus.unsplash.com/premium_photo-1681487769650-a0c3fbaed85a?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cmVwb3J0c3xlbnwwfHwwfHx8MA%3D%3D

datasources:
  categories:
    type: datasource.static
    options:
      data:
        - id: 1
          category: Financial
          description: Includes income statement, balance sheet, and cash-flow overview.
          icon: report-f-grade
          # Specify the jig name that is used for navigation in the go-to action.
          myjig: report-financial
        - id: 2
          category: Employees
          description: Shows stock levels, reorder alerts, shrinkage, and usage trends.
          icon: recruiting-employee-search-document
          myjig: report-employee
        - id: 3
          category: Customers
          description: Summarises customer activity, support tickets, satisfaction, and retention.
          icon: hand-shake-heart
          myjig: report-customer
        - id: 4
          category: Inventory
          description: Shows stock levels, reorder alerts, shrinkage, and usage trends.
          icon: supply-chain-distributor-box-package
          myjig: report-inventory
        - id: 5
          category: Operational
          description: Provides insights into efficiency, workflow bottlenecks, and key KPIs across departments.
          icon: amazon-elastic-service-operational-analytics
          myjig: report-operations
        - id: 6
          category: Sales
          description: Tracks revenue, sales performance, top products, and trends.
          icon: monetization-approve
          myjig: report-sales

data: =@ctx.datasources.categories
# Display items in a 2-column layout.
numberOfColumns: 2
item:
  type: component.menu-item
  options:
    title:
      text: =@ctx.current.item.category
      fontSize: regular
      # color:
      isSubtle: false
      isBold: true
      numberOfLines: 1
      transform: none
    subtitle:
      text: =@ctx.current.item.description
      fontSize: regular
      isSubtle: true
      isBold: false
      numberOfLines: 5
    leftElement:
      element: icon
      icon: =@ctx.current.item.icon
      color: color1
      type: contained
      shape: circle
    # When the menu-item is pressed, navigate to the corresponding report.  
    onPress:
      type: action.go-to
      options:
        # Use the myjig set up in the datasource for navigation. 
        linkTo: =@ctx.current.item.myjig

report-financial.jigx

report-employee.jigx

report-customer.jigx

report-sales.jigx

report-inventory.jigx

Untitled

Menu-item with columns per device type

Five column layout for tablets

Three column layout for phone

This example displays online-shop categories using menu-items. The number of columns (numberOfColumns) adjusts dynamically depending on the device type, showing three columns on mobile and 5 on tablets, to optimise space and readability. Each menu-item includes an icon and category title pulled from the datasource, and tapping a category navigates the user to the relevant shop section.

Examples:

See the full example in GitHub.

menu-item-columns.jigx

title: Global Online
type: jig.list
icon: contact

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1561715276-a2d087060f1d?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8c2hvcHBpbmclMjBiYWd8ZW58MHx8MHx8fDA%3D

data: =@ctx.datasources.categories
# Dynamically set the number of columns based on device type.
# If device is a tablet, display 5 columns; otherwise display 3 columns.
numberOfColumns: =@ctx.system.deviceType = 'Tablet' ? 5:3
item:
 # Define and configure the menu-item component.
  type: component.menu-item
  options:
    # Dynamically add the title from the datasource and add styling.
    title:
      text: =@ctx.current.item.name
      fontSize: small
      isSubtle: false
      isBold: false
      # Limit text to maximum 2 lines (overflow will be truncated/ellipsed)
      numberOfLines: 2
    leftElement:
      # Specify that the left element should be an icon.
      element: icon
      icon: =@ctx.current.item.icon
      color: color4
      shape: rounded
      type: duotone
    # Define the action to execute when the menu-item is pressed.  
    onPress:
      type: action.go-to
      options:
        linkTo: =@ctx.current.item.myjig

datasource