JavaScript: Custom Widget with Default Context Menu

Question

I have created a custom button/widget for opening links. But it doesn't have the context menu options that a regular hyperlink has.

css:

span.button {
  display: inline-block;
  border: solid;
  border-radius: 5px;
  padding: 5px;
  background-color: #ffffff1f;
}

span.button:hover {
  cursor: pointer;
  background-color: #ffffffff;
}

html:

<span class="button" onclick="onNavButton('http://example.org/')">Example Button</span>

javascript:

window.onNavButton = function(href="/") {
  document.location.href = href;
};

I would like the context menu to have browsers' options for opening link in a new tab, new window, copy link to clipboard, etc. Is there a standard call for displaying hyperlink-related context menus? Or do I have to create a completely custom one for my site? I'm using vanilla JavaScript. But, if need be, I can learn to use an extension.

As a side note, is it possible to show the destination URL in the browser's status bar when hovering over the widget, like how is done with a normal hyperlink?

Edit: This may be answered here.

Answer 1

The answer was right here.

The element must be wrapped in an anchor tag with an href. Unfortunately, it marks the entire element as "visited" once clicked on. But there is probably a way to disable that.

Edit: And the answer to disabling it is here

a:visited {
  color: inherit;
}