diff --git a/README.md b/README.md
index bbe7c788..b40c889d 100644
--- a/README.md
+++ b/README.md
@@ -180,6 +180,7 @@ var opt = {
| `config` | String / Object | _String_ : A URL string from which to load a [Vega](https://vega.github.io/vega/docs/config/)/[Vega-Lite](https://vega.github.io/vega-lite/docs/config.html) or [Vega-Lite](https://vega.github.io/vega-lite/docs/config.html) configuration file. This URL will be subject to standard browser security restrictions. Typically this URL will point to a file on the same host and port number as the web page itself.
_Object_ : A Vega/Vega-Lite configuration as a parsed JSON object to override the default configuration options. |
| `theme` | String | If specified, tells Vega-Embed use the theme from [Vega Themes](https://github.com/vega/vega-themes). **Experimental: we may update themes with minor version updates of Vega-Embed.** |
| `defaultStyle` | Boolean or String | If set to `true` (default), the embed actions are shown in a menu. Set to `false` to use simple links. Provide a string to set the style sheet (not supported in usermeta). |
+| `forceActionsMenu` | Boolean | If set to `true`, the embed actions are shown in a menu like they would be if the `defaultStyle` option were truthy. This can be useful when setting `defaultStyle` to `false` and defining menu styles in the parent application.
| `bind` | String or Element | The element that should contain any input elements bound to signals. |
| `renderer` | String | The renderer to use for the view. One of `"canvas"` (default) or `"svg"`. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_renderer) for details. May be a custom value if passing your own `viewClass` option. |
| `logLevel` | Level | Sets the current log level. See [Vega docs](https://vega.github.io/vega/docs/api/view/#view_logLevel) for details. |
diff --git a/src/embed.ts b/src/embed.ts
index ce411d3d..8a5ef521 100644
--- a/src/embed.ts
+++ b/src/embed.ts
@@ -96,6 +96,7 @@ export interface EmbedOptions {
ast?: boolean;
expr?: typeof expressionInterpreter;
viewClass?: typeof View;
+ forceActionsMenu?: boolean;
}
const NAMES: {[key in Mode]: string} = {
@@ -434,7 +435,7 @@ async function _embed(
if (actions !== false) {
let wrapper = element;
- if (opts.defaultStyle !== false) {
+ if (opts.defaultStyle !== false || opts.forceActionsMenu) {
const details = document.createElement('details');
details.title = i18n.CLICK_TO_VIEW_ACTIONS;
element.append(details);
diff --git a/test/embed.test.ts b/test/embed.test.ts
index 4ee26d16..e1d54f01 100644
--- a/test/embed.test.ts
+++ b/test/embed.test.ts
@@ -124,6 +124,18 @@ test('does not set has-actions if actions are not specified', async () => {
expect(el.querySelector('.has-actions')).toBeNull();
});
+test('shows actions in menu if defaultStyle and forceActionsMenu are both false', async () => {
+ const el = document.createElement('div');
+ await embed(el, vlSpec, {defaultStyle: false, forceActionsMenu: false});
+ expect(el.querySelector('details')).toBeNull();
+});
+
+test('shows actions in menu if defaultStyle is false and forceActionsMenu is true', async () => {
+ const el = document.createElement('div');
+ await embed(el, vlSpec, {defaultStyle: false, forceActionsMenu: true});
+ expect(el.querySelector('details')).not.toBeNull();
+});
+
test('add fix-x class when needed', async () => {
const el = document.createElement('div');
await embed(el, {