112Share & Ask AI
The two things a reader does with a post that are not reading it: send it to someone, or ask a model about it. Both are dropdowns composed from .ns-usermenu and .ns-menu__item — there is no bespoke share widget and no bespoke AI panel, because a menu of links is a menu of links.
Use it for
- A post header or footer bar
- Beside a section heading, seeded with that section rather than the whole article
- --down anywhere that is not the foot of the lesson rail
Not for
- A row of eight network icons. Every one you add makes the whole row less likely to be used — three destinations and a copy-link is the whole set
- Share counts. A post showing “2 shares” is arguing against itself
- Anything that talks to a model from the page. Each row is a plain link that opens the reader's own assistant with the question pre-written; nothing here has an API key
The actions bar
Share, Ask AI, and the reading time. Sits under the post header or above the footer — one row, three affordances, and it composes the same .ns-usermenu the navbar account menu uses.
markup
<div style="display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;max-inline-size:42rem;inline-size:100%">
<div class="ns-usermenu">
<button type="button" class="ns-btn ns-btn--outline ns-btn--sm" data-ns-menu aria-expanded="false" aria-controls="share-menu">
<i class="ph ph-share-network" aria-hidden="true"></i> Share
</button>
<div class="ns-usermenu__panel ns-askai--down" id="share-menu" style="inline-size:14rem">
<span class="ns-menu__label">Send this post to</span>
<a class="ns-menu__item" href="#0" target="_blank" rel="noopener"><i class="ph ph-linkedin-logo" aria-hidden="true"></i> LinkedIn <i class="ph ph-arrow-up-right ns-askai__cue" aria-hidden="true"></i></a>
<a class="ns-menu__item" href="#0" target="_blank" rel="noopener"><i class="ph ph-x-logo" aria-hidden="true"></i> X <i class="ph ph-arrow-up-right ns-askai__cue" aria-hidden="true"></i></a>
<a class="ns-menu__item" href="#0"><i class="ph ph-envelope-simple" aria-hidden="true"></i> Email <i class="ph ph-arrow-up-right ns-askai__cue" aria-hidden="true"></i></a>
<hr class="ns-menu__sep">
<button type="button" class="ns-menu__item" data-ns-copylink><i class="ph ph-link-simple" aria-hidden="true"></i> <span data-label>Copy link</span></button>
</div>
</div>
<div class="ns-usermenu" data-ns-ask-prompt="%s">
<button type="button" class="ns-btn ns-btn--outline ns-btn--sm" data-ns-menu aria-expanded="false" aria-controls="post-ask">
<i class="ph ph-sparkle" aria-hidden="true"></i> Ask AI
</button>
<div class="ns-usermenu__panel ns-askai ns-askai--down" id="post-ask">
<label class="ns-visually-hidden" for="post-ask-q">Your question about this post</label>
<textarea class="ns-textarea ns-askai__field" id="post-ask-q" rows="3" data-ns-ask-input>Explain "Why your trigger fails at 201 records" to me like I have never written Apex.</textarea>
<span class="ns-menu__label">Open this post in</span>
<a class="ns-menu__item" href="https://claude.ai/new" target="_blank" rel="noopener" data-ns-ask="https://claude.ai/new?q="><i class="ph ph-sparkle" aria-hidden="true"></i> Claude <i class="ph ph-arrow-up-right ns-askai__cue" aria-hidden="true"></i></a>
<a class="ns-menu__item" href="https://chatgpt.com/" target="_blank" rel="noopener" data-ns-ask="https://chatgpt.com/?q="><i class="ph ph-chat-circle-text" aria-hidden="true"></i> ChatGPT <i class="ph ph-arrow-up-right ns-askai__cue" aria-hidden="true"></i></a>
<a class="ns-menu__item" href="https://www.perplexity.ai/" target="_blank" rel="noopener" data-ns-ask="https://www.perplexity.ai/search?q="><i class="ph ph-magnifying-glass" aria-hidden="true"></i> Perplexity <i class="ph ph-arrow-up-right ns-askai__cue" aria-hidden="true"></i></a>
<hr class="ns-menu__sep">
<button type="button" class="ns-menu__item" data-ns-ask-copy><i class="ph ph-file-text" aria-hidden="true"></i> Copy the prompt</button>
</div>
</div>
<span class="ns-postmeta" style="margin-inline-start:auto"><span>6 min read</span></span>
</div>Inline, beside a section
The same menu seeded with ONE section instead of the whole post — the question a reader actually has is about the paragraph in front of them, not about the article. Sits in the prose flow as a quiet row after the passage, so it never interrupts the reading line.
Counting the wrong thing
The 101-query error almost never means you wrote 101 queries. It means you wrote one, inside a loop, and the loop ran 101 times.
markup
<div class="ns-prose" style="max-inline-size:38rem;inline-size:100%">
<h3>Counting the wrong thing</h3>
<p>The 101-query error almost never means you wrote 101 queries. It means you wrote one, inside a loop, and the loop ran 101 times.</p>
<div class="ns-usermenu" data-ns-ask-prompt="%s" style="margin-block-start:var(--space-3)">
<button type="button" class="ns-btn ns-btn--quiet ns-btn--xs" data-ns-menu aria-expanded="false" aria-controls="sec-ask">
<i class="ph ph-sparkle" aria-hidden="true"></i> Explain this section
</button>
<div class="ns-usermenu__panel ns-askai ns-askai--down" id="sec-ask">
<label class="ns-visually-hidden" for="sec-ask-q">Your question about this section</label>
<textarea class="ns-textarea ns-askai__field" id="sec-ask-q" rows="3" data-ns-ask-input>Explain "Counting the wrong thing" — why does one query inside a loop become 101?</textarea>
<span class="ns-menu__label">Open this section in</span>
<a class="ns-menu__item" href="https://claude.ai/new" target="_blank" rel="noopener" data-ns-ask="https://claude.ai/new?q="><i class="ph ph-sparkle" aria-hidden="true"></i> Claude <i class="ph ph-arrow-up-right ns-askai__cue" aria-hidden="true"></i></a>
<a class="ns-menu__item" href="https://chatgpt.com/" target="_blank" rel="noopener" data-ns-ask="https://chatgpt.com/?q="><i class="ph ph-chat-circle-text" aria-hidden="true"></i> ChatGPT <i class="ph ph-arrow-up-right ns-askai__cue" aria-hidden="true"></i></a>
<hr class="ns-menu__sep">
<button type="button" class="ns-menu__item" data-ns-ask-copy><i class="ph ph-file-text" aria-hidden="true"></i> Copy the prompt</button>
</div>
</div>
</div>The share rail
The vertical column beside a long post, for the reader who decides to share at paragraph forty rather than at the end. Same set, no menu — at this size the icons are the menu. It is the first thing dropped below 80rem.
markup
<div class="ns-share ns-share--rail" style="inline-size:3.5rem">
<span class="ns-share__label">Share</span>
<a class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" href="#0" aria-label="Share on LinkedIn"><i class="ph ph-linkedin-logo" aria-hidden="true"></i></a>
<a class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" href="#0" aria-label="Share on X"><i class="ph ph-x-logo" aria-hidden="true"></i></a>
<button type="button" class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" aria-label="Copy link"><i class="ph ph-link-simple" aria-hidden="true"></i></button>
<button type="button" class="ns-btn ns-btn--quiet ns-btn--icon ns-btn--sm" aria-label="Save for later"><i class="ph ph-bookmark-simple" aria-hidden="true"></i></button>
</div>Accessibility contract
- The trigger carries aria-expanded and aria-controls; the panel is a real menu of real links
- Every row that leaves the site says so with the out-arrow, before it is clicked rather than after
- The question field has a real label — visually hidden, because the button beside it already says Ask AI, but present, because a bare textarea is unusable to a screen reader
- Copy-link reports success in text, not only by swapping an icon: an icon flip is invisible to a screen reader and to anyone not looking at the button they just pressed