Skip to main content

Nav Menu Item Fields

How to get values from Nav Menu Item ACF custom fields​

On this page will be shown examples how to get values of ACF custom fields related to Nav Menu Items.

We have to use acf_value field of GraphQL NavMenuItem type to get value of any ACF field type. This field takes one argument that is the name of the field.

note

Some ACF field types(Post Object, Relationship, Taxonomy, User, Group, Repeater) have their own specific GraphQL fields to get values in advanced way.

Example for Text field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items{
      custom_text: acf_value(name: "custom_text")
    }
  }
}

Example for Text Area field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_text_area: acf_value(name: "custom_text_area")
    }
  }
}

Example for Number field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_number: acf_value(name: "custom_number")
    }
  }
}

Example for Range field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_range: acf_value(name: "custom_range")
    }
  }
}

Example for Email field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      email: acf_value(name: "custom_email")
    }
  }
}

Example for URL field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_url: acf_value(name: "custom_url")
    }
  }
}

Example for Password field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      some_api_key: acf_value(name: "some_api_key")
    }
  }
}

Example for Image field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_image: acf_value(name: "custom_image")
    }
  }
}

Example for File field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_file: acf_value(name: "custom_file")
    }
  }
}

Example for Wysiwyg Editor field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_wysiwyg_editor_text: acf_value(name: "custom_wysiwyg_editor_text")
    }
  }
}

Example for oEmbed field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_oembed: acf_value(name: "custom_oembed")
    }
  }
}
query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_gallery: acf_value(name: "custom_gallery")
    }
  }
}

Example for Select field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_select: acf_value(name: "custom_select")
    }
  }
}

Example for Checkbox field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_checkbox: acf_value(name: "custom_checkbox")
    }
  }
}

Example for Radio Button field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    "items": [
      0: {
        custom_radio_button: acf_value(name: "custom_radio_button")
      }
    ]
  }
}

Example for Button Group field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_button_group: acf_value(name: "custom_button_group")
    }
  }
}

Example for True / False field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_bool: acf_value(name: "custom_bool")
    }
  }
}
query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_link: acf_value(name: "custom_link")
    }
  }
}

Example for Post Object field (basic method):​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_post_object: acf_value(name: "custom_post_object")
    }
  }
}

Example for Post Object field with single value (advanced method):​

info

GraphQL NavMenuItem type has field "acf_post_object_value" which purpose is to get value of ACF Post Object field with "Select multiple values?" setting selected as "No".

But comparing to "acf_value" - "acf_post_object_value" always returns Post GraphQL type(no matter which return format was selected for ACF Post Object field).

This method gives us more power and flexibility:

  • we can get just necessary fields of Post
  • we can get meta values of this Post
  • we can get FeaturedImage of this Post
  • we can get own ACF fields of this Post
query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_post_object: acf_post_object_value(name: "custom_post_object") {
        ID
        post_title
        post_content
        some_meta_key: meta_value(key: "some_meta_key")
        custom_acf_value: acf_value(name: "custom_acf_field_name")
      }
    }
  }
}

Example for Post Object field with multiple values (advanced method):​

info

GraphQL NavMenuItem type has field "acf_multiple_post_object_value" which purpose is to get value of ACF Post Object field with "Select multiple values?" setting selected as "Yes".

"acf_multiple_post_object_value" always returns array of Post GraphQL types(of course if "Select multiple values?" setting was selected as "Yes").

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_multiple_post_object: acf_multiple_post_object_value(name: "custom_multiple_post_object") {
        ID
        post_title
        post_content
        some_meta_key: meta_value(key: "some_meta_key")
        custom_acf_value: acf_value(name: "custom_acf_field_name")
      }
    }
  }
}

Example for Page Link field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_page_link: acf_value(name: "custom_page_link")
    }
  }
}

Example for Relationship field (basic method):​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_relationship: acf_value(name: "custom_relationship")
    }
  }
}

Example for Relationship field (advanced method):​

info

GraphQL NavMenuItem type has field "acf_relationship_value" which purpose is to get ACF Relationship field value.

But comparing to "acf_value" - "acf_relationship_value" always returns Array of GraphQL Post types(no matter which return format was selected for ACF Relationship field).

This method gives us more power and flexibility:

  • we can get just necessary fields of each Post
  • we can get meta values of each Post
  • we can get FeaturedImage of each Post
  • we can get own ACF fields of each Post
query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_relationship: acf_relationship_value(name: "custom_relationship") {
        ID
        post_title
        post_content
        some_meta_key: meta_value(key: "some_meta_key")
        custom_acf_value: acf_value(name: "custom_acf_field_name")
      }
    }
  }
}

Example for Taxonomy field (basic method):​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_taxonomy: acf_value(name: "custom_taxonomy")
    }
  }
}

Example for Taxonomy field with single value (advanced method):​

info

GraphQL NavMenuItem type has field "acf_taxonomy_value" which purpose is to get value of ACF Taxonomy field with "Appearance" setting selected as "Radio Buttons" or "Select".

But comparing to "acf_value" - "acf_taxonomy_value" always returns Term GraphQL type(no matter which return format was selected for ACF Taxonomy field).

This method gives us more power and flexibility:

  • we can get just necessary fields of Term
  • we can get meta values of this Term
  • we can get own ACF fields of this Term
query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_term: acf_taxonomy_value(name: "custom_taxonomy") {
        term_id
        slug
        description
        some_meta_key: meta_value(key: "some_meta_key")
        custom_acf_value: acf_value(name: "custom_acf_field_name")
      }
    }
  }
}

Example for Taxonomy field with multiple values (advanced method):​

info

GraphQL NavMenuItem type has field "acf_multiple_taxonomy_value" which purpose is to get value of ACF Taxonomy field with "Appearance" setting selected as "Checkbox" or "Multi Select".

"acf_multiple_taxonomy_value" always returns array of GraphQL Term types(of course if "Appearance" setting was selected as "Checkbox" or "Multi Select").

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_term: acf_multiple_taxonomy_value(name: "custom_taxonomy") {
        term_id
        slug
        description
        some_meta_key: meta_value(key: "some_meta_key")
        custom_acf_value: acf_value(name: "custom_acf_field_name")
      }
    }
  }
}

Example for User field (basic method):​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_user: acf_value(name: "custom_user")
    }
  }
}

Example for User field with single value (advanced method):​

info

GraphQL NavMenuItem type has field "acf_user_value" which purpose is to get value of ACF User field with "Select multiple values?" setting selected as "No".

But comparing to "acf_value" - "acf_user_value" always returns User GraphQL type(no matter which return format was selected for ACF User field).

This method gives us more power and flexibility:

  • we can get just necessary fields of User
  • we can get meta values of this User
  • we can get own ACF fields of this User
query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_user: acf_user_value(name: "custom_user") {
        ID
        display_name
        user_email
        some_meta_key: meta_value(key: "some_meta_key")
        custom_acf_value: acf_value(name: "custom_acf_field_name")
      }
    }
  }
}

Example for User field with multiple values (advanced method):​

info

GraphQL NavMenuItem type has field "acf_multiple_user_value" which purpose is to get value of ACF User field with "Select multiple values?" setting selected as "Yes".

"acf_multiple_user_value" always returns array of User GraphQL types(of course if "Select multiple values?" setting was selected as "Yes").

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_multiple_users: acf_multiple_user_value(name: "custom_user") {
        ID
        display_name
        user_email
        some_meta_key: meta_value(key: "some_meta_key")
        custom_acf_value: acf_value(name: "custom_acf_field_name")
      }
    }
  }
}

Example for Google Map field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_google_map: acf_value(name: "custom_google_map")
    }
  }
}

Example for Date Picker field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_date_picker: acf_value(name: "custom_date_picker")
    }
  }
}

Example for Date Time Picker field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_datetime_picker: acf_value(name: "custom_datetime_picker")
    }
  }
}

Example for Time Picker field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_time_picker: acf_value(name: "custom_time_picker")
    }
  }
}

Example for Color Picker field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_color_picker: acf_value(name: "custom_color_picker")
    }
  }
}

Example for Group field (basic method):​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_group: acf_value(name: "custom_group")
    }
  }
}

Example for Group field (advanced method):​

info

GraphQL NavMenuItem type has field "acf_group_value" which purpose is to get ACF Group field value.

But comparing to "acf_value" - "acf_group_value" always returns GraphQL AcfGroupField type(AcfGroupField has all acf related GraphQL fields).

This method gives us more power and flexibility:

  • we can get just necessary sub fields of AcfGroupField
  • if one of sub fields has ACF Post Object type, we can use acf_post_object_value to get value of this sub field
  • if one of sub fields has ACF Relationship type, we can use acf_relationship_value to get value of this sub field
  • if one of sub fields has ACF User type, we can use acf_user_value to get value of this sub field
  • if one of sub fields has ACF Group type, we can use acf_group_value to get value of this sub field
  • if one of sub fields has ACF Repeater type, we can use acf_repeater_value to get value of this sub field
query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_group: acf_group_value(name: "custom_group") {
        text: acf_value(name: "text")
        post: acf_post_object_value(name: "post_object") {
          ID
          post_title
          post_content
          some_meta_key: meta_value(key: "some_meta_key")
          custom_acf_value: acf_value(name: "custom_acf_field_name")
        }
        user: acf_user_value(name: "user") {
          ID
          display_name
          user_email
        }
      }
    }
  }
}

Example for Repeater field (basic method):​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_repeater: acf_value(name: "custom_repeater")
    }
  }
}

Example for Repeater field (advanced method):​

info

GraphQL NavMenuItem type has field "acf_repeater_value" which purpose is to get ACF Repeater field value.

But comparing to "acf_value" - "acf_repeater_value" always returns Array of GraphQL AcfRepeaterRow types(AcfRepeaterRow has all acf related GraphQL fields).

This method gives us more power and flexibility:

  • we can get just necessary sub fields of each AcfRepeaterRow
  • if one of sub fields has ACF Post Object type, we can use acf_post_object_value to get value of this sub field
  • if one of sub fields has ACF Relationship type, we can use acf_relationship_value to get value of this sub field
  • if one of sub fields has ACF User type, we can use acf_user_value to get value of this sub field
  • if one of sub fields has ACF Group type, we can use acf_group_value to get value of this sub field
  • if one of sub fields has ACF Repeater type, we can use acf_repeater_value to get value of this sub field
query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_repeater: acf_repeater_value(name: "custom_repeater") {
        text: acf_value(name: "text")
        post: acf_post_object_value(name: "post_object") {
          ID
          post_title
          post_content
          some_meta_key: meta_value(key: "some_meta_key")
          custom_acf_value: acf_value(name: "custom_acf_field_name")
        }
        user: acf_user_value(name: "user") {
          ID
          display_name
          user_email
        }
      }
    }
  }
}

Example for Flexible Content field:​

query{
  nav_menu(identifier: "slug", value: "primary-menu"){
    items {
      custom_flexible_content: acf_value(name: "custom_flexible_content")
    }
  }
}