The menu

The filter inside the share sheet

Fifty-four services is more than anyone wants to scan, so the share sheet opens with a filter field already focused and a count beside the title saying how much of the catalog is left. It is always there, and on a short list one rule removes it.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_dd"></a>
</div>

Taking it out

Worth doing when an allowlist has cut the catalog down to a handful, where a filter is furniture. Hide the field and the head keeps its title, its count and its close button.

.ats_menu_search { display: none; }

It matches on the name, not the key

Typing "what" finds WhatsApp; typing its key does not. Names are what a reader has, which is why the field is focused the moment the sheet opens — the fastest path to a service is to type it.

Live demo

Demo ↗

An article worth passing on

Press More and start typing. The count in the head moves as the list narrows, and an empty result says so rather than showing a blank panel.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>

Which services