Share | NDS - Vanilla National Design System

Current Page

Drop a .nds-share wrapper anywhere on the page with a Dropmenu trigger and four share items. With no data attributes, the utility shares window.location.href and document.title.

Share This Page

Custom URL and Title

Add data-share-url and data-share-title to the wrapper to share something other than the current page. Useful for article cards, search results, and downloadable resources.

Share a Specific Article


<div class="nds-share nds-dropmenu"
    data-share-url="https://nds.sa/components/button"
    data-share-title="NDS Button Component">
    <button class="nds-btn nds-secondary-outline nds-dropmenu-trigger" aria-label="Share Article">
        <i class="nds-icon nds-hgi-share-01" aria-hidden="true"></i>
        <span class="nds-label">Share Article</span>
    </button>
    <div class="nds-dropmenu-menu" hidden>
        <button class="nds-btn nds-subtle nds-dropmenu-item nds-share-x" type="button" aria-label="Share on X">
            <i class="nds-icon nds-hgi-new-twitter" aria-hidden="true"></i>
            <span class="nds-label">X</span>
        </button>
        <button class="nds-btn nds-subtle nds-dropmenu-item nds-share-linkedin" type="button" aria-label="Share on LinkedIn">
            <i class="nds-icon nds-hgi-linkedin-02" aria-hidden="true"></i>
            <span class="nds-label">LinkedIn</span>
        </button>
        <button class="nds-btn nds-subtle nds-dropmenu-item nds-share-whatsapp" type="button" aria-label="Share on WhatsApp">
            <i class="nds-icon nds-hgi-whatsapp" aria-hidden="true"></i>
            <span class="nds-label">WhatsApp</span>
        </button>
        <button class="nds-btn nds-subtle nds-dropmenu-item nds-share-copy" type="button" aria-label="Copy Link"
            data-label="Link Copied!" data-message="Article link copied to clipboard" data-no-auto-close>
            <i class="nds-icon nds-hgi-link-04" aria-hidden="true"></i>
            <span class="nds-label">Copy Link</span>
        </button>
    </div>
</div>

Inline Buttons

Drop the same four share buttons directly inside .nds-share (no .nds-dropmenu, no trigger) to render them as an inline row. Use any button variant you like, and add .nds-icon-only to hide the label when space is tight.

Built-in Features

Auto-initialization

Every .nds-share wrapper on the page is wired up automatically by the NDS loader. Drop the markup in, no JS to write.

Four Social Targets

X, LinkedIn, WhatsApp, and Copy Link are wired by class (nds-share-x, nds-share-linkedin, nds-share-whatsapp, nds-share-copy). Each opens a sized popup for the platform's native share dialog.

Copy Link Composition

The Copy Link action reuses the Copy utility for clipboard write, checkmark flash, label swap, and screen reader announcement. In the dropmenu variant it also closes the menu after the flash restores.

Multiple Instances

Any number of .nds-share wrappers can co-exist on a single page. Each reads its own data-share-url and data-share-title independently.

Dropmenu or Inline

Add nds-dropmenu to get a collapsible menu with Dropmenu handling open/close and outside-click. Omit it to render the buttons as an inline row — same JS, same data attributes.

Usage Guidelines

Best Practices

Use the default form (no data attributes) for page-level sharing, typically in the hero action bar. It always reflects the current URL and title, so it works on every page without per-page configuration
Use data-share-url and data-share-title for item-level sharing: an article card, a news story, a downloadable resource. Keeps the utility reusable without duplicating JS
Always set a meaningful aria-label on the trigger ("Share Page", "Share Article", "Share Report") so screen reader users know what is being shared
Keep data-no-auto-close on the Copy Link item in the dropmenu variant. Without it the dropmenu closes before the 2 second success flash finishes, and users never see the confirmation. The inline variant does not need this attribute
Pick the inline variant for article footers, cards, and anywhere you want the share targets visible at rest. Pick the dropmenu variant for toolbar-style placements where the trigger needs to collapse
Pair data-label with data-message on the Copy Link item so sighted users and screen reader users get equivalent feedback. The defaults ("Link Copied!" / "Page link copied to clipboard") are a good starting point
Avoid stacking more than one Share wrapper in the same visual block. If a list has a share button per row, put the trigger inside the row, not next to a page-level share
Do not remove share targets silently to "simplify" the UI. Either show all four or drop the Share utility on that page entirely; partial sets confuse returning users

Data Attributes

Attribute	Placement	Description
`data-share-url`	Wrapper	URL to share. Falls back to `window.location.href`.
`data-share-title`	Wrapper	Title passed to X and WhatsApp share dialogs. Falls back to `document.title`.
`data-label`	Copy Link item	Visible label swap during the 2 second success flash. Read by the Copy utility.
`data-message`	Copy Link item	Screen reader announcement on successful copy. Falls back to `data-label`, then to "Copied".
`data-no-auto-close`	Copy Link item	Keeps the Dropmenu open during the success flash so the user sees the confirmation.

JavaScript API

The NDS.Share module exposes a single method, NDS.Share.init(), which the NDS loader calls once on page load to attach the delegated click listener. Call it again after injecting new .nds-share markup into the page; the listener is rebound via AbortController so repeat calls do not stack handlers.


// Re-initialize after injecting dynamic .nds-share markup
NDS.Share.init();