JavaScript Navigator contacts Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word CONTACTS

Definition

navigator.contacts is a read-only property that returns a ContactsManager object (MDN) — the entry point to the Contact Picker API so users can share selected contact details with your site.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use navigator.contacts. Start with this line.

JavaScript
navigator.contacts
CallWhat it does
navigator.contactsPrimary signature.

Built into the browser. Read navigator.contacts on Navigator — no import required.

Library declarations
JavaScript
navigator.contacts

Parameters

ParameterDescription
Feature detectRequired. API may be missing
Secure contextRequired. HTTPS or localhost

Return Value

Return ValueDescription
*ContactsManager (same object each time)

JavaScript Examples

Example 1 — Feature Detect

MDN’s recommended support check, plus secure context.

JavaScript
const supported =
  "contacts" in navigator && "ContactsManager" in window;
const secure = window.isSecureContext;

console.log("contacts supported:", supported);
console.log("secure context:", secure);

if (supported && secure) {
  console.log("ready for Contact Picker");
} else {
  console.log("use a manual contact form");
}
Try It Yourself

How It Works

  1. Check both names. MDN uses contacts and ContactsManager.
  2. Check HTTPS. The API needs a secure context.
  3. Fallback. If either fails, show a normal form.
  4. No picker yet. Detection alone does not open contacts.

Example 2 — getProperties()

Ask which contact fields the system can return.

JavaScript
async function listContactProps() {
  if (!("contacts" in navigator)) {
    console.log("contacts missing");
    return;
  }
  const props = await navigator.contacts.getProperties();
  console.log("available:", props);
}

listContactProps();
Try It Yourself

How It Works

  1. Detect first. Skip when the API is absent.
  2. Await getProperties. Resolves to an array of field names.
  3. Filter requests. Only pass supported props to select().
  4. No UI yet. This step does not open the picker.

Example 3 — select() Pattern

Open the picker from a button click and handle cancel.

JavaScript
async function pickContacts() {
  if (!("contacts" in navigator)) {
    console.log("contacts missing");
    return;
  }
  try {
    const contacts = await navigator.contacts.select(
      ["name", "email", "tel"],
      { multiple: true }
    );
    console.log("picked:", contacts.length);
  } catch (err) {
    console.log("cancelled or failed:", err.name);
  }
}

// Call pickContacts() from a button click — not on page load.
Try It Yourself

How It Works

  1. User gesture. Call from a click handler, not on load.
  2. Pass props + options. Ask for fields; set multiple if needed.
  3. Await results. Resolves to the contacts the user shared.
  4. Catch cancel. Dismissing the picker rejects the Promise.
Compatibility

Browser Support

navigator.contacts is marked Experimental on MDN with limited availability — not Baseline. Support has been strongest on Chrome for Android.

✓ Experimental · Limited

Navigator.contacts

Returns ContactsManager for the Contact Picker API (getProperties + select). Secure context required. Feature-detect always.

Limited Not Baseline
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
contacts Check MDN

Bottom line: Treat Contact Picker as progressive enhancement. Always provide a manual contact form when the API is missing or cancelled.

Frequently Asked Questions

It is a read-only Navigator property that returns a ContactsManager object — the entry point to the Contact Picker API so users can select contacts and share limited details with your site.
Yes. MDN marks it Experimental and not Baseline. Support is limited (historically strongest on Chrome for Android). Always feature-detect and provide a manual form fallback.
Yes. It is available only in secure contexts (HTTPS or localhost) in supporting browsers.
Call await navigator.contacts.select(properties, options) from a user gesture such as a button click. Pass property names like "name", "email", and "tel". Use { multiple: true } to allow several contacts.
await navigator.contacts.getProperties() resolves to an array of property names the system can return. Use it so you only ask select() for supported fields.
No. The property is read-only. Two successive reads return the same ContactsManager object. You call methods on that object.

Next: cookieEnabled

Learn the related Navigator cookieEnabled property.

cookieEnabled tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

7 people found this page helpful

JavaScript Navigator connection Property JavaScript Navigator cookieEnabled Property