Component

Toolbar dropdown

Toggles a contextual overlay for displaying lists of button.

Use this component to group a series of actions

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Insert...

• Image

How to call this component

<%= render "components/toolbar_dropdown", {
  title: "Insert...",
  items: [
    {
      text: "Image",
      href: "#",
      target: "_blank",
      data_attributes: {
        module: "inline-image-modal",
        "modal-action": "open"
      }
    },
    {
      text: "Contact",
      button_options: {
        value: "add_contact",
        name: "submit"
      }
    }
  ]
} %>

Accessibility acceptance criteria

The component must:

• be operable with a keyboard
• toggle the contextual overlay when clicked
• hide the contextual overlay on blur
• hide the contextual overlay when a button element within the component is being clicked

Other examples

Within markdown editor toolbar (preview)

Insert...

• Image

<div class="app-c-markdown-editor__toolbar">
  <markdown-toolbar class="app-c-markdown-editor__toolbar-group" for="markdown-editor">
    <%= render "components/toolbar_dropdown", {
  title: "Insert...",
  align: "right",
  items: [
    {
      text: "Image",
      href: "#",
      target: "_blank",
      data_attributes: {
        module: "inline-image-modal",
        "modal-action": "open"
      }
    },
    {
      text: "Contact",
      button_options: {
        value: "add_contact",
        name: "submit"
      }
    }
  ]
} %>
  </markdown-toolbar>
</div>