diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/actionItemsContainer.vue b/administrator/components/com_media/resources/scripts/components/browser/actionItems/actionItemsContainer.vue
new file mode 100644
index 0000000000000..d35eb3fd7d839
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/actionItemsContainer.vue
@@ -0,0 +1,175 @@
+<template>
+  <span
+    class="media-browser-select"
+    :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+    :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+  />
+  <div
+    class="media-browser-actions"
+    :class="{ active: showActions }"
+  >
+    <media-browser-action-item-toggle
+      ref="actionToggle"
+      :on-focused="focused"
+      :main-action="openActions"
+      @keyup.up="openLastActions()"
+      @keyup.down="openActions()"
+    />
+    <div
+      v-if="showActions"
+      class="media-browser-actions-list"
+    >
+      <ul>
+        <li>
+          <media-browser-action-item-preview
+            v-if="previewable"
+            ref="actionPreview"
+            :on-focused="focused"
+            :main-action="openPreview"
+            :closing-action="hideActions"
+            @keyup.up="$refs.actionDelete.$el.focus()"
+            @keyup.down="$refs.actionDownload.$el.focus()"
+          />
+        </li>
+        <li>
+          <media-browser-action-item-download
+            v-if="downloadable"
+            ref="actionDownload"
+            :on-focused="focused"
+            :main-action="download"
+            :closing-action="hideActions"
+            @keyup.up="$refs.actionPreview.$el.focus()"
+            @keyup.down="$refs.actionRename.$el.focus()"
+          />
+        </li>
+        <li>
+          <media-browser-action-item-rename
+            ref="actionRename"
+            :on-focused="focused"
+            :main-action="openRenameModal"
+            :closing-action="hideActions"
+            @keyup.up="downloadable ? $refs.actionDownload.$el.focus() : $refs.actionDelete.$el.focus()"
+            @keyup.down="
+              canEdit
+                ? $refs.actionEdit.$el.focus()
+                : shareable ? $refs.actionShare.$el.focus() : $refs.actionDelete.$el.focus()
+            "
+          />
+        </li>
+        <li>
+          <media-browser-action-item-edit
+            v-if="canEdit"
+            ref="actionEdit"
+            :on-focused="focused"
+            :main-action="editItem"
+            :closing-action="hideActions"
+            @keyup.up="$refs.actionRename.$el.focus()"
+            @keyup.down="$refs.actionShare.$el.focus()"
+          />
+        </li>
+        <li>
+          <media-browser-action-item-share
+            v-if="shareable"
+            ref="actionShare"
+            :on-focused="focused"
+            :main-action="openShareUrlModal"
+            :closing-action="hideActions"
+            @keyup.up="
+              canEdit
+                ? $refs.actionEdit.$el.focus()
+                : $refs.actionRename.$el.focus()
+            "
+            @keyup.down="$refs.actionDelete.$el.focus()"
+          />
+        </li>
+        <li>
+          <media-browser-action-item-delete
+            ref="actionDelete"
+            :on-focused="focused"
+            :main-action="openConfirmDeleteModal"
+            :hide-actions="hideActions"
+            @keyup.up="shareable ? $refs.actionShare.$el.focus() : $refs.actionRename.$el.focus()"
+            @keyup.down="previewable ? $refs.actionPreview.$el.focus() : $refs.actionRename.$el.focus()"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as types from '../../../store/mutation-types.es6';
+
+export default {
+  name: 'MediaBrowserActionItemsContainer',
+  props: {
+    item: { type: Object, default: () => {} },
+    onFocused: { type: Function, default: () => {} },
+    edit: { type: Function, default: () => {} },
+    editable: { type: Function, default: () => false },
+    previewable: { type: Boolean, default: false },
+    downloadable: { type: Boolean, default: false },
+    shareable: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      showActions: false,
+    };
+  },
+  computed: {
+    /* Check if the item is an document to edit */
+    canEdit() {
+      return this.editable();
+    },
+  },
+  methods: {
+    /* Hide actions dropdown */
+    hideActions() {
+      this.showActions = false;
+      this.$nextTick(() => this.$refs.actionToggle.$el.focus());
+    },
+    /* Preview an item */
+    openPreview() {
+      this.$store.commit(types.SHOW_PREVIEW_MODAL);
+      this.$store.dispatch('getFullContents', this.item);
+    },
+    /* Preview an item */
+    download() {
+      this.$store.dispatch('download', this.item);
+    },
+    /* Opening confirm delete modal */
+    openConfirmDeleteModal() {
+      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
+    },
+    /* Rename an item */
+    openRenameModal() {
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_RENAME_MODAL);
+    },
+    /* Open modal for share url */
+    openShareUrlModal() {
+      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
+      this.$store.commit(types.SHOW_SHARE_MODAL);
+    },
+    /* Open actions dropdown */
+    openActions() {
+      this.showActions = true;
+      if (this.previewable) {
+        this.$nextTick(() => this.$refs.actionPreview.$el.focus());
+      } else {
+        this.$nextTick(() => this.$refs.actionRename.$el.focus());
+      }
+    },
+    /* Open actions dropdown and focus on last element */
+    openLastActions() {
+      this.showActions = true;
+      this.$nextTick(() => this.$refs.actionDelete.$el.focus());
+    },
+    editItem() {
+      this.edit();
+    },
+  },
+};
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/delete.vue b/administrator/components/com_media/resources/scripts/components/browser/actionItems/delete.vue
new file mode 100644
index 0000000000000..70008116b1b82
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/delete.vue
@@ -0,0 +1,41 @@
+<template>
+  <button
+    type="button"
+    class="action-delete"
+    :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
+    :title="translate('COM_MEDIA_ACTION_DELETE')"
+    @keyup.enter="openConfirmDeleteModal()"
+    @keyup.space="openConfirmDeleteModal()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-trash"
+      aria-hidden="true"
+      @click.stop="openConfirmDeleteModal()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemDelete',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    openConfirmDeleteModal() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.hideActions();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/download.vue b/administrator/components/com_media/resources/scripts/components/browser/actionItems/download.vue
new file mode 100644
index 0000000000000..914964d1d57f4
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/download.vue
@@ -0,0 +1,41 @@
+<template>
+  <button
+    type="button"
+    class="action-download"
+    :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
+    :title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
+    @keyup.enter="download()"
+    @keyup.space="download()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-download"
+      aria-hidden="true"
+      @click.stop="download()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemDownload',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    download() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.closingAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/edit.vue b/administrator/components/com_media/resources/scripts/components/browser/actionItems/edit.vue
new file mode 100644
index 0000000000000..ca796ea12c5e2
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/edit.vue
@@ -0,0 +1,44 @@
+<template>
+  <button
+    type="button"
+    class="action-edit"
+    :aria-label="translate('COM_MEDIA_ACTION_EDIT')"
+    :title="translate('COM_MEDIA_ACTION_EDIT')"
+    @keyup.enter="editItem()"
+    @keyup.space="editItem()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-pencil-alt"
+      aria-hidden="true"
+      @click.stop="editItem()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemEdit',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    openRenameModal() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.closingAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+    editItem() {
+      this.mainAction();
+    },
+  },
+};
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/export.es6.js b/administrator/components/com_media/resources/scripts/components/browser/actionItems/export.es6.js
new file mode 100644
index 0000000000000..1e8a9cdaef040
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/export.es6.js
@@ -0,0 +1,12 @@
+import Rename from './rename.vue';
+import Toggle from './toggle.vue';
+import Preview from './preview.vue';
+import Download from './download.vue';
+import Share from './share.vue';
+import Delete from './delete.vue';
+import Edit from './edit.vue';
+import Container from './actionItemsContainer.vue';
+
+export {
+  Rename, Toggle, Preview, Download, Share, Delete, Edit, Container,
+};
diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/preview.vue b/administrator/components/com_media/resources/scripts/components/browser/actionItems/preview.vue
new file mode 100644
index 0000000000000..db29e51b300ff
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/preview.vue
@@ -0,0 +1,41 @@
+<template>
+  <button
+    type="button"
+    class="action-preview"
+    :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
+    :title="translate('COM_MEDIA_ACTION_PREVIEW')"
+    @keyup.enter="openPreview()"
+    @keyup.space="openPreview()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-search-plus"
+      aria-hidden="true"
+      @click.stop="openPreview()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemPreview',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    openPreview() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.closingAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/rename.vue b/administrator/components/com_media/resources/scripts/components/browser/actionItems/rename.vue
new file mode 100644
index 0000000000000..b2ef7221c889f
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/rename.vue
@@ -0,0 +1,42 @@
+<template>
+  <button
+    ref="actionRenameButton"
+    type="button"
+    class="action-rename"
+    :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
+    :title="translate('COM_MEDIA_ACTION_RENAME')"
+    @keyup.enter="openRenameModal()"
+    @keyup.space="openRenameModal()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-text-width"
+      aria-hidden="true"
+      @click.stop="openRenameModal()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemRename',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    openRenameModal() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.closingAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/share.vue b/administrator/components/com_media/resources/scripts/components/browser/actionItems/share.vue
new file mode 100644
index 0000000000000..ce6a9c7c36471
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/share.vue
@@ -0,0 +1,41 @@
+<template>
+  <button
+    type="button"
+    class="action-url"
+    :aria-label="translate('COM_MEDIA_ACTION_SHARE')"
+    :title="translate('COM_MEDIA_ACTION_SHARE')"
+    @keyup.enter="openShareUrlModal()"
+    @keyup.space="openShareUrlModal()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.esc="hideActions()"
+  >
+    <span
+      class="image-browser-action icon-link"
+      aria-hidden="true"
+      @click.stop="openShareUrlModal()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemShare',
+  props: {
+    onFocused: { type: Function, default: () => {} },
+    mainAction: { type: Function, default: () => {} },
+    closingAction: { type: Function, default: () => {} },
+  },
+  methods: {
+    openShareUrlModal() {
+      this.mainAction();
+    },
+    hideActions() {
+      this.closingAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/actionItems/toggle.vue b/administrator/components/com_media/resources/scripts/components/browser/actionItems/toggle.vue
new file mode 100644
index 0000000000000..e5a028f7c94c8
--- /dev/null
+++ b/administrator/components/com_media/resources/scripts/components/browser/actionItems/toggle.vue
@@ -0,0 +1,36 @@
+<template>
+  <button
+    type="button"
+    class="action-toggle"
+    :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
+    :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
+    @keyup.enter="openActions()"
+    @focus="focused(true)"
+    @blur="focused(false)"
+    @keyup.space="openActions()"
+  >
+    <span
+      class="image-browser-action icon-ellipsis-h"
+      aria-hidden="true"
+      @click.stop="openActions()"
+    />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'MediaBrowserActionItemToggle',
+  props: {
+    mainAction: { type: Function, default: () => {} },
+    onFocused: { type: Function, default: () => {} },
+  },
+  methods: {
+    openActions() {
+      this.mainAction();
+    },
+    focused(bool) {
+      this.onFocused(bool);
+    },
+  },
+};
+</script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/audio.vue b/administrator/components/com_media/resources/scripts/components/browser/items/audio.vue
index 209f97786686a..9f7ff713e27e9 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/items/audio.vue
+++ b/administrator/components/com_media/resources/scripts/components/browser/items/audio.vue
@@ -14,158 +14,18 @@
     <div class="media-browser-item-info">
       {{ item.name }} {{ item.filetype }}
     </div>
-    <span
-      class="media-browser-select"
-      :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
-      :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+    <media-browser-action-items-container
+      ref="container"
+      :focused="focused"
+      :item="item"
+      :previewable="true"
+      :downloadable="true"
+      :shareable="true"
     />
-    <div
-      class="media-browser-actions"
-      :class="{'active': showActions}"
-    >
-      <button
-        ref="actionToggle"
-        type="button"
-        class="action-toggle"
-        :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        @keyup.enter="openActions()"
-        @focus="focused(true)"
-        @blur="focused(false)"
-        @keyup.space="openActions()"
-        @keyup.down="openActions()"
-        @keyup.up="openLastActions()"
-      >
-        <span
-          class="image-browser-action icon-ellipsis-h"
-          aria-hidden="true"
-          @click.stop="openActions()"
-        />
-      </button>
-      <div
-        v-if="showActions"
-        class="media-browser-actions-list"
-      >
-        <ul>
-          <li>
-            <button
-              ref="actionPreview"
-              type="button"
-              class="action-preview"
-              :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
-              :title="translate('COM_MEDIA_ACTION_PREVIEW')"
-              @keyup.enter="openPreview()"
-              @keyup.space="openPreview()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDelete.focus()"
-              @keyup.down="$refs.actionDownload.focus()"
-            >
-              <span
-                class="image-browser-action icon-search-plus"
-                aria-hidden="true"
-                @click.stop="openPreview()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDownload"
-              type="button"
-              class="action-download"
-              :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              :title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              @keyup.enter="download()"
-              @keyup.space="download()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionPreview.focus()"
-              @keyup.down="$refs.actionRename.focus()"
-            >
-              <span
-                class="image-browser-action icon-download"
-                aria-hidden="true"
-                @click.stop="download()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionRename"
-              type="button"
-              class="action-rename"
-              :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
-              :title="translate('COM_MEDIA_ACTION_RENAME')"
-              @keyup.enter="openRenameModal()"
-              @keyup.space="openRenameModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDownload.focus()"
-              @keyup.down="$refs.actionShare.focus()"
-            >
-              <span
-                class="image-browser-action icon-text-width"
-                aria-hidden="true"
-                @click.stop="openRenameModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionShare"
-              type="button"
-              class="action-url"
-              :aria-label="translate('COM_MEDIA_ACTION_SHARE')"
-              :title="translate('COM_MEDIA_ACTION_SHARE')"
-              @keyup.enter="openShareUrlModal()"
-              @keyup.space="openShareUrlModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionRename.focus()"
-              @keyup.down="$refs.actionDelete.focus()"
-            >
-              <span
-                class="image-browser-action icon-link"
-                aria-hidden="true"
-                @click.stop="openShareUrlModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDelete"
-              type="button"
-              class="action-delete"
-              :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
-              :title="translate('COM_MEDIA_ACTION_DELETE')"
-              @keyup.enter="openConfirmDeleteModal()"
-              @keyup.space="openConfirmDeleteModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionShare.focus()"
-              @keyup.down="$refs.actionPreview.focus()"
-            >
-              <span
-                class="image-browser-action icon-trash"
-                aria-hidden="true"
-                @click.stop="openConfirmDeleteModal()"
-              />
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-import * as types from '../../../store/mutation-types.es6';
-
 export default {
   name: 'MediaBrowserItemAudio',
   // eslint-disable-next-line vue/require-prop-types
@@ -176,45 +36,13 @@ export default {
     };
   },
   methods: {
-    /* Preview an item */
-    openPreview() {
-      this.$store.commit(types.SHOW_PREVIEW_MODAL);
-      this.$store.dispatch('getFullContents', this.item);
-    },
-    /* Preview an item */
-    download() {
-      this.$store.dispatch('download', this.item);
-    },
-    /* Opening confirm delete modal */
-    openConfirmDeleteModal() {
-      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
-    },
-    /* Rename an item */
-    openRenameModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_RENAME_MODAL);
-    },
-    /* Open modal for share url */
-    openShareUrlModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_SHARE_MODAL);
-    },
-    /* Open actions dropdown */
-    openActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionPreview.focus());
-    },
-    /* Open actions dropdown and focus on last element */
-    openLastActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionDelete.focus());
-    },
     /* Hide actions dropdown */
     hideActions() {
-      this.showActions = false;
-      this.$nextTick(() => this.$refs.actionToggle.focus());
+      this.$refs.container.hideActions();
+    },
+    /* Preview an item */
+    openPreview() {
+      this.$refs.container.openPreview();
     },
   },
 };
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/directory.vue b/administrator/components/com_media/resources/scripts/components/browser/items/directory.vue
index a74313732f063..e78f5422eb487 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/items/directory.vue
+++ b/administrator/components/com_media/resources/scripts/components/browser/items/directory.vue
@@ -16,91 +16,15 @@
     <div class="media-browser-item-info">
       {{ item.name }}
     </div>
-    <span
-      class="media-browser-select"
-      :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
-      :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+    <media-browser-action-items-container
+      ref="container"
+      :focused="focused"
+      :item="item"
     />
-    <div
-      class="media-browser-actions"
-      :class="{'active': showActions}"
-    >
-      <button
-        ref="actionToggle"
-        class="action-toggle"
-        type="button"
-        :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        @keyup.enter="openActions()"
-        @focus="focused(true)"
-        @blur="focused(false)"
-        @keyup.space="openActions()"
-        @keyup.down="openActions()"
-        @keyup.up="openLastActions()"
-      >
-        <span
-          class="image-browser-action icon-ellipsis-h"
-          aria-hidden="true"
-          @click.stop="openActions()"
-        />
-      </button>
-      <div
-        v-if="showActions"
-        class="media-browser-actions-list"
-      >
-        <ul>
-          <li>
-            <button
-              ref="actionRename"
-              type="button"
-              class="action-rename"
-              :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
-              :title="translate('COM_MEDIA_ACTION_RENAME')"
-              @keyup.enter="openRenameModal()"
-              @keyup.space="openRenameModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDelete.focus()"
-              @keyup.down="$refs.actionDelete.focus()"
-            >
-              <span
-                class="image-browser-action icon-text-width"
-                aria-hidden="true"
-                @click.stop="openRenameModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDelete"
-              type="button"
-              class="action-delete"
-              :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
-              :title="translate('COM_MEDIA_ACTION_DELETE')"
-              @keyup.enter="openConfirmDeleteModal()"
-              @keyup.space="openConfirmDeleteModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionRename.focus()"
-              @keyup.down="$refs.actionRename.focus()"
-            >
-              <span
-                class="image-browser-action icon-trash"
-                aria-hidden="true"
-                @click.stop="openConfirmDeleteModal()"
-              />
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
   </div>
 </template>
 <script>
 import navigable from '../../../mixins/navigable.es6';
-import * as types from '../../../store/mutation-types.es6';
 
 export default {
   name: 'MediaBrowserItemDirectory',
@@ -117,32 +41,9 @@ export default {
     onPreviewDblClick() {
       this.navigateTo(this.item.path);
     },
-    /* Opening confirm delete modal */
-    openConfirmDeleteModal() {
-      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
-    },
-    /* Rename an item */
-    openRenameModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_RENAME_MODAL);
-    },
-    /* Open actions dropdown */
-    openActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionRename.focus());
-    },
-    /* Open actions dropdown and focus on last element */
-    openLastActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionDelete.focus());
-    },
     /* Hide actions dropdown */
     hideActions() {
-      this.showActions = false;
-      // eslint-disable-next-line no-unused-expressions
-      this.$nextTick(() => { this.$refs.actionToggle ? this.$refs.actionToggle.focus() : false; });
+      this.$refs.container.hideActions();
     },
   },
 };
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/document.vue b/administrator/components/com_media/resources/scripts/components/browser/items/document.vue
index d8bb03445b8d3..1cb08c2f1c5e6 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/items/document.vue
+++ b/administrator/components/com_media/resources/scripts/components/browser/items/document.vue
@@ -19,155 +19,22 @@
       :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
       :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
     />
-    <div
-      class="media-browser-actions"
-      :class="{'active': showActions}"
-    >
-      <button
-        ref="actionToggle"
-        type="button"
-        class="action-toggle"
-        :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        @keyup.enter="openActions()"
-        @focus="focused(true)"
-        @blur="focused(false)"
-        @keyup.space="openActions()"
-        @keyup.down="openActions()"
-        @keyup.up="openLastActions()"
-      >
-        <span
-          class="image-browser-action icon-ellipsis-h"
-          aria-hidden="true"
-          @click.stop="openActions()"
-        />
-      </button>
-      <div
-        v-if="showActions"
-        class="media-browser-actions-list"
-      >
-        <ul>
-          <li>
-            <button
-              ref="actionPreview"
-              type="button"
-              class="action-preview"
-              :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
-              :title="translate('COM_MEDIA_ACTION_PREVIEW')"
-              @keyup.enter="openPreview()"
-              @keyup.space="openPreview()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDelete.focus()"
-              @keyup.down="$refs.actionDownload.focus()"
-            >
-              <span
-                class="image-browser-action icon-search-plus"
-                aria-hidden="true"
-                @click.stop="openPreview()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDownload"
-              type="button"
-              class="action-download"
-              :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              :title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              @keyup.enter="download()"
-              @keyup.space="download()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionPreview.focus()"
-              @keyup.down="$refs.actionRename.focus()"
-            >
-              <span
-                class="image-browser-action icon-download"
-                aria-hidden="true"
-                @click.stop="download()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionRename"
-              type="button"
-              class="action-rename"
-              :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
-              :title="translate('COM_MEDIA_ACTION_RENAME')"
-              @keyup.enter="openRenameModal()"
-              @keyup.space="openRenameModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDownload.focus()"
-              @keyup.down="$refs.actionShare.focus()"
-            >
-              <span
-                class="image-browser-action icon-text-width"
-                aria-hidden="true"
-                @click.stop="openRenameModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionShare"
-              type="button"
-              class="action-url"
-              :aria-label="translate('COM_MEDIA_ACTION_SHARE')"
-              :title="translate('COM_MEDIA_ACTION_SHARE')"
-              @keyup.enter="openShareUrlModal()"
-              @keyup.space="openShareUrlModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionRename.focus()"
-              @keyup.down="$refs.actionDelete.focus()"
-            >
-              <span
-                class="image-browser-action icon-link"
-                aria-hidden="true"
-                @click.stop="openShareUrlModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDelete"
-              type="button"
-              class="action-delete"
-              :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
-              :title="translate('COM_MEDIA_ACTION_DELETE')"
-              @keyup.enter="openConfirmDeleteModal()"
-              @keyup.space="openConfirmDeleteModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionShare.focus()"
-              @keyup.down="$refs.actionPreview.focus()"
-            >
-              <span
-                class="image-browser-action icon-trash"
-                aria-hidden="true"
-                @click.stop="openConfirmDeleteModal()"
-              />
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
+    <media-browser-action-items-container
+      ref="container"
+      :focused="focused"
+      :item="item"
+      :edit="editItem"
+      :can-edit="canEdit"
+      :previewable="true"
+      :downloadable="true"
+      :shareable="true"
+    />
   </div>
 </template>
 
 <script>
-import * as types from '../../../store/mutation-types.es6';
-
 export default {
-  name: 'MediaBrowserItemAudio',
+  name: 'MediaBrowserItemDocument',
   // eslint-disable-next-line vue/require-prop-types
   props: ['item', 'focused'],
   data() {
@@ -176,46 +43,20 @@ export default {
     };
   },
   methods: {
-    /* Preview an item */
-    openPreview() {
-      this.$store.commit(types.SHOW_PREVIEW_MODAL);
-      this.$store.dispatch('getFullContents', this.item);
-    },
-    /* Preview an item */
-    download() {
-      this.$store.dispatch('download', this.item);
-    },
-    /* Opening confirm delete modal */
-    openConfirmDeleteModal() {
-      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
-    },
-    /* Rename an item */
-    openRenameModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_RENAME_MODAL);
-    },
-    /* Open modal for share url */
-    openShareUrlModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_SHARE_MODAL);
-    },
-    /* Open actions dropdown */
-    openActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionPreview.focus());
-    },
-    /* Open actions dropdown and focus on last element */
-    openLastActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionDelete.focus());
+    /* Check if the item is an document to edit */
+    canEdit() {
+      return [].includes(this.item.extension.toLowerCase());
     },
     /* Hide actions dropdown */
     hideActions() {
-      this.showActions = false;
-      this.$nextTick(() => this.$refs.actionToggle.focus());
+      this.$refs.container.hideActions();
+    },
+    /* Preview an item */
+    openPreview() {
+      this.$refs.container.openPreview();
     },
+    /* Edit an item */
+    editItem() {},
   },
 };
 </script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/file.vue b/administrator/components/com_media/resources/scripts/components/browser/items/file.vue
index c44c029b5512f..7acc169032bb4 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/items/file.vue
+++ b/administrator/components/com_media/resources/scripts/components/browser/items/file.vue
@@ -18,129 +18,18 @@
       :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
       :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
     />
-    <div
-      class="media-browser-actions"
-      :class="{'active': showActions}"
-    >
-      <button
-        ref="actionToggle"
-        href="#"
-        class="action-toggle"
-        type="button"
-        :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        @keyup.enter="openActions()"
-        @focus="focused(true)"
-        @blur="focused(false)"
-        @keyup.space="openActions()"
-        @keyup.down="openActions()"
-        @keyup.up="openLastActions()"
-      >
-        <span
-          class="image-browser-action icon-ellipsis-h"
-          aria-hidden="true"
-          @click.stop="openActions()"
-        />
-      </button>
-      <div
-        v-if="showActions"
-        class="media-browser-actions-list"
-      >
-        <ul>
-          <li>
-            <button
-              ref="actionDownload"
-              type="button"
-              class="action-download"
-              :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              :title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              @keyup.enter="download()"
-              @keyup.space="download()"
-              @keyup.up="$refs.actionDelete.focus()"
-              @keyup.down="$refs.actionRename.focus()"
-            >
-              <span
-                class="image-browser-action icon-download"
-                aria-hidden="true"
-                @click.stop="download()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionRename"
-              type="button"
-              class="action-rename"
-              :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
-              :title="translate('COM_MEDIA_ACTION_RENAME')"
-              @keyup.space="openRenameModal()"
-              @keyup.enter="openRenameModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDownload.focus()"
-              @keyup.down="$refs.actionUrl.focus()"
-            >
-              <span
-                class="image-browser-action icon-text-width"
-                aria-hidden="true"
-                @click.stop="openRenameModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionUrl"
-              type="button"
-              class="action-url"
-              :aria-label="translate('COM_MEDIA_ACTION_SHARE')"
-              :title="translate('COM_MEDIA_ACTION_SHARE')"
-              @keyup.space="openShareUrlModal()"
-              @keyup.enter="openShareUrlModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionRename.focus()"
-              @keyup.down="$refs.actionDelete.focus()"
-            >
-              <span
-                class="image-browser-action icon-link"
-                aria-hidden="true"
-                @click.stop="openShareUrlModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDelete"
-              type="button"
-              class="action-delete"
-              :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
-              :title="translate('COM_MEDIA_ACTION_DELETE')"
-              @keyup.space="openConfirmDeleteModal()"
-              @keyup.enter="openConfirmDeleteModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionUrl.focus()"
-              @keyup.down="$refs.actionDownload.focus()"
-            >
-              <span
-                class="image-browser-action icon-trash"
-                aria-hidden="true"
-                @click.stop="openConfirmDeleteModal()"
-              />
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
+    <media-browser-action-items-container
+      ref="container"
+      :focused="focused"
+      :item="item"
+      :previewable="true"
+      :downloadable="true"
+      :shareable="true"
+    />
   </div>
 </template>
 
 <script>
-import * as types from '../../../store/mutation-types.es6';
-
 export default {
   name: 'MediaBrowserItemFile',
   // eslint-disable-next-line vue/require-prop-types
@@ -151,40 +40,13 @@ export default {
     };
   },
   methods: {
-    /* Preview an item */
-    download() {
-      this.$store.dispatch('download', this.item);
-    },
-    /* Opening confirm delete modal */
-    openConfirmDeleteModal() {
-      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
-    },
-    /* Rename an item */
-    openRenameModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_RENAME_MODAL);
-    },
-    /* Open modal for share url */
-    openShareUrlModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_SHARE_MODAL);
-    },
-    /* Open actions dropdown */
-    openActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionDownload.focus());
-    },
-    /* Open actions dropdown and focus on last element */
-    openLastActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionDelete.focus());
-    },
     /* Hide actions dropdown */
     hideActions() {
-      this.showActions = false;
-      this.$nextTick(() => this.$refs.actionToggle.focus());
+      this.$refs.container.hideActions();
+    },
+    /* Preview an item */
+    openPreview() {
+      this.$refs.container.openPreview();
     },
   },
 };
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/image.vue b/administrator/components/com_media/resources/scripts/components/browser/items/image.vue
index b7c4951407ec8..ffa72ff7a6c3e 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/items/image.vue
+++ b/administrator/components/com_media/resources/scripts/components/browser/items/image.vue
@@ -20,175 +20,21 @@
       :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
       :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
     />
-    <div
-      class="media-browser-actions"
-      :class="{'active': showActions}"
-    >
-      <button
-        ref="actionToggle"
-        type="button"
-        class="action-toggle"
-        :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        @keyup.enter="openActions()"
-        @focus="focused(true)"
-        @blur="focused(false)"
-        @keyup.space="openActions()"
-        @keyup.down="openActions()"
-        @keyup.up="openLastActions()"
-      >
-        <span
-          class="image-browser-action icon-ellipsis-h"
-          aria-hidden="true"
-          @click.stop="openActions()"
-        />
-      </button>
-      <div
-        v-if="showActions"
-        class="media-browser-actions-list"
-      >
-        <ul>
-          <li>
-            <button
-              ref="actionPreview"
-              type="button"
-              class="action-preview"
-              :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
-              :title="translate('COM_MEDIA_ACTION_PREVIEW')"
-              @keyup.enter="openPreview()"
-              @keyup.space="openPreview()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDelete.focus()"
-              @keyup.down="$refs.actionDownload.focus()"
-            >
-              <span
-                class="image-browser-action icon-search-plus"
-                aria-hidden="true"
-                @click.stop="openPreview()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDownload"
-              type="button"
-              class="action-download"
-              :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              :title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              @keyup.enter="download()"
-              @keyup.space="download()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionPreview.focus()"
-              @keyup.down="$refs.actionRename.focus()"
-            >
-              <span
-                class="image-browser-action icon-download"
-                aria-hidden="true"
-                @click.stop="download()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionRename"
-              type="button"
-              class="action-rename"
-              :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
-              :title="translate('COM_MEDIA_ACTION_RENAME')"
-              @keyup.enter="openRenameModal()"
-              @keyup.space="openRenameModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDownload.focus()"
-              @keyup.down="canEdit ? $refs.actionEdit.focus() : $refs.actionShare.focus()"
-            >
-              <span
-                class="image-browser-action icon-text-width"
-                aria-hidden="true"
-                @click.stop="openRenameModal()"
-              />
-            </button>
-          </li>
-          <li v-if="canEdit">
-            <button
-              ref="actionEdit"
-              type="button"
-              class="action-edit"
-              :aria-label="translate('COM_MEDIA_ACTION_EDIT')"
-              :title="translate('COM_MEDIA_ACTION_EDIT')"
-              @keyup.enter="editItem()"
-              @keyup.space="editItem()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionRename.focus()"
-              @keyup.down="$refs.actionShare.focus()"
-            >
-              <span
-                class="image-browser-action icon-pencil-alt"
-                aria-hidden="true"
-                @click.stop="editItem()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionShare"
-              type="button"
-              class="action-url"
-              :aria-label="translate('COM_MEDIA_ACTION_SHARE')"
-              :title="translate('COM_MEDIA_ACTION_SHARE')"
-              @keyup.enter="openShareUrlModal()"
-              @keyup.space="openShareUrlModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="canEdit ? $refs.actionEdit.focus() : $refs.actionRename.focus()"
-              @keyup.down="$refs.actionDelete.focus()"
-            >
-              <span
-                class="image-browser-action icon-link"
-                aria-hidden="true"
-                @click.stop="openShareUrlModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDelete"
-              type="button"
-              class="action-delete"
-              :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
-              :title="translate('COM_MEDIA_ACTION_DELETE')"
-              @keyup.enter="openConfirmDeleteModal()"
-              @keyup.space="openConfirmDeleteModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionShare.focus()"
-              @keyup.down="$refs.actionPreview.focus()"
-            >
-              <span
-                class="image-browser-action icon-trash"
-                aria-hidden="true"
-                @click.stop="openConfirmDeleteModal()"
-              />
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
+    <media-browser-action-items-container
+      ref="container"
+      :focused="focused"
+      :item="item"
+      :edit="editItem"
+      :editable="canEdit"
+      :previewable="true"
+      :downloadable="true"
+      :shareable="true"
+    />
   </div>
 </template>
 
 <script>
 import { api } from '../../../app/Api.es6';
-import * as types from '../../../store/mutation-types.es6';
 
 export default {
   name: 'MediaBrowserItemImage',
@@ -200,10 +46,6 @@ export default {
     };
   },
   computed: {
-    /* Check if the item is an image to edit */
-    canEdit() {
-      return ['jpg', 'jpeg', 'png'].indexOf(this.item.extension.toLowerCase()) > -1;
-    },
     /* Get the hashed URL */
     getHashedURL() {
       if (this.item.adapter.startsWith('local-')) {
@@ -213,25 +55,17 @@ export default {
     },
   },
   methods: {
-    /* Preview an item */
-    openPreview() {
-      this.$store.commit(types.SHOW_PREVIEW_MODAL);
-      this.$store.dispatch('getFullContents', this.item);
-    },
-    /* Preview an item */
-    download() {
-      this.$store.dispatch('download', this.item);
+    /* Check if the item is an document to edit */
+    canEdit() {
+      return ['jpg', 'jpeg', 'png'].includes(this.item.extension.toLowerCase());
     },
-    /* Opening confirm delete modal */
-    openConfirmDeleteModal() {
-      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
+    /* Hide actions dropdown */
+    hideActions() {
+      this.$refs.container.hideActions();
     },
-    /* Rename an item */
-    openRenameModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_RENAME_MODAL);
+    /* Preview an item */
+    openPreview() {
+      this.$refs.container.openPreview();
     },
     /* Edit an item */
     editItem() {
@@ -240,26 +74,6 @@ export default {
 
       window.location.href = fileBaseUrl + this.item.path;
     },
-    /* Open modal for share url */
-    openShareUrlModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_SHARE_MODAL);
-    },
-    /* Open actions dropdown */
-    openActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionPreview.focus());
-    },
-    /* Open actions dropdown and focus on last element */
-    openLastActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionDelete.focus());
-    },
-    /* Hide actions dropdown */
-    hideActions() {
-      this.showActions = false;
-      this.$nextTick(() => this.$refs.actionToggle.focus());
-    },
   },
 };
 </script>
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js b/administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js
index cea449a718017..53366fbaaba74 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js
+++ b/administrator/components/com_media/resources/scripts/components/browser/items/item.es6.js
@@ -24,23 +24,34 @@ export default {
       if (this.item.type === 'dir') return Directory;
 
       // Render image items
-      if (this.item.extension && api.imagesExtensions.includes(this.item.extension.toLowerCase())) {
+      if (
+        this.item.extension
+        && api.imagesExtensions.includes(this.item.extension.toLowerCase())
+      ) {
         return Image;
       }
 
       // Render video items
-      if (this.item.extension && api.videoExtensions.includes(this.item.extension.toLowerCase())) {
+      if (
+        this.item.extension
+        && api.videoExtensions.includes(this.item.extension.toLowerCase())
+      ) {
         return Video;
       }
 
       // Render audio items
-      if (this.item.extension && api.audioExtensions.includes(this.item.extension.toLowerCase())) {
+      if (
+        this.item.extension
+        && api.audioExtensions.includes(this.item.extension.toLowerCase())
+      ) {
         return Audio;
       }
 
       // Render document items
-      if (this.item.extension
-        && api.documentExtensions.includes(this.item.extension.toLowerCase())) {
+      if (
+        this.item.extension
+        && api.documentExtensions.includes(this.item.extension.toLowerCase())
+      ) {
         return Doc;
       }
 
@@ -63,7 +74,9 @@ export default {
      * @returns {boolean}
      */
     isSelected() {
-      return this.$store.state.selectedItems.some((selected) => selected.path === this.item.path);
+      return this.$store.state.selectedItems.some(
+        (selected) => selected.path === this.item.path,
+      );
     },
 
     /**
@@ -95,34 +108,28 @@ export default {
     handleClick(event) {
       if (this.item.path && this.item.type === 'file') {
         window.parent.document.dispatchEvent(
-          new CustomEvent(
-            'onMediaFileSelected',
-            {
-              bubbles: true,
-              cancelable: false,
-              detail: {
-                path: this.item.path,
-                thumb: this.item.thumb,
-                fileType: this.item.mime_type ? this.item.mime_type : false,
-                extension: this.item.extension ? this.item.extension : false,
-                width: this.item.width ? this.item.width : 0,
-                height: this.item.height ? this.item.height : 0,
-              },
+          new CustomEvent('onMediaFileSelected', {
+            bubbles: true,
+            cancelable: false,
+            detail: {
+              path: this.item.path,
+              thumb: this.item.thumb,
+              fileType: this.item.mime_type ? this.item.mime_type : false,
+              extension: this.item.extension ? this.item.extension : false,
+              width: this.item.width ? this.item.width : 0,
+              height: this.item.height ? this.item.height : 0,
             },
-          ),
+          }),
         );
       }
 
       if (this.item.type === 'dir') {
         window.parent.document.dispatchEvent(
-          new CustomEvent(
-            'onMediaFileSelected',
-            {
-              bubbles: true,
-              cancelable: false,
-              detail: {},
-            },
-          ),
+          new CustomEvent('onMediaFileSelected', {
+            bubbles: true,
+            cancelable: false,
+            detail: {},
+          }),
         );
       }
 
@@ -138,14 +145,11 @@ export default {
       }
       this.$store.dispatch('toggleBrowserItemSelect', this.item);
       window.parent.document.dispatchEvent(
-        new CustomEvent(
-          'onMediaFileSelected',
-          {
-            bubbles: true,
-            cancelable: false,
-            detail: {},
-          },
-        ),
+        new CustomEvent('onMediaFileSelected', {
+          bubbles: true,
+          cancelable: false,
+          detail: {},
+        }),
       );
 
       // If more than one item was selected and the user clicks again on the selected item,
@@ -180,13 +184,10 @@ export default {
         onFocused: this.focused,
       },
       [
-        h(
-          this.itemType(),
-          {
-            item: this.item,
-            focused: this.focused,
-          },
-        ),
+        h(this.itemType(), {
+          item: this.item,
+          focused: this.focused,
+        }),
       ],
     );
   },
diff --git a/administrator/components/com_media/resources/scripts/components/browser/items/video.vue b/administrator/components/com_media/resources/scripts/components/browser/items/video.vue
index 45623f42ac71d..4ba3978ed5e33 100644
--- a/administrator/components/com_media/resources/scripts/components/browser/items/video.vue
+++ b/administrator/components/com_media/resources/scripts/components/browser/items/video.vue
@@ -14,158 +14,18 @@
     <div class="media-browser-item-info">
       {{ item.name }} {{ item.filetype }}
     </div>
-    <span
-      class="media-browser-select"
-      :aria-label="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
-      :title="translate('COM_MEDIA_TOGGLE_SELECT_ITEM')"
+    <media-browser-action-items-container
+      ref="container"
+      :focused="focused"
+      :item="item"
+      :previewable="true"
+      :downloadable="true"
+      :shareable="true"
     />
-    <div
-      class="media-browser-actions"
-      :class="{'active': showActions}"
-    >
-      <button
-        ref="actionToggle"
-        type="button"
-        class="action-toggle"
-        :aria-label="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        :title="translate('COM_MEDIA_OPEN_ITEM_ACTIONS')"
-        @keyup.enter="openActions()"
-        @focus="focused(true)"
-        @blur="focused(false)"
-        @keyup.space="openActions()"
-        @keyup.down="openActions()"
-        @keyup.up="openLastActions()"
-      >
-        <span
-          class="image-browser-action icon-ellipsis-h"
-          aria-hidden="true"
-          @click.stop="openActions()"
-        />
-      </button>
-      <div
-        v-if="showActions"
-        class="media-browser-actions-list"
-      >
-        <ul>
-          <li>
-            <button
-              ref="actionPreview"
-              type="button"
-              class="action-preview"
-              :aria-label="translate('COM_MEDIA_ACTION_PREVIEW')"
-              :title="translate('COM_MEDIA_ACTION_PREVIEW')"
-              @keyup.enter="openPreview()"
-              @keyup.space="openPreview()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDelete.focus()"
-              @keyup.down="$refs.actionDownload.focus()"
-            >
-              <span
-                class="image-browser-action icon-search-plus"
-                aria-hidden="true"
-                @click.stop="openPreview()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDownload"
-              type="button"
-              class="action-download"
-              :aria-label="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              :title="translate('COM_MEDIA_ACTION_DOWNLOAD')"
-              @keyup.enter="download()"
-              @keyup.space="download()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionPreview.focus()"
-              @keyup.down="$refs.actionRename.focus()"
-            >
-              <span
-                class="image-browser-action icon-download"
-                aria-hidden="true"
-                @click.stop="download()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionRename"
-              type="button"
-              class="action-rename"
-              :aria-label="translate('COM_MEDIA_ACTION_RENAME')"
-              :title="translate('COM_MEDIA_ACTION_RENAME')"
-              @keyup.enter="openRenameModal()"
-              @keyup.space="openRenameModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionDownload.focus()"
-              @keyup.down="$refs.actionShare.focus()"
-            >
-              <span
-                class="image-browser-action icon-text-width"
-                aria-hidden="true"
-                @click.stop="openRenameModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionShare"
-              type="button"
-              class="action-url"
-              :aria-label="translate('COM_MEDIA_ACTION_SHARE')"
-              :title="translate('COM_MEDIA_ACTION_SHARE')"
-              @keyup.enter="openShareUrlModal()"
-              @keyup.space="openShareUrlModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionRename.focus()"
-              @keyup.down="$refs.actionDelete.focus()"
-            >
-              <span
-                class="image-browser-action icon-link"
-                aria-hidden="true"
-                @click.stop="openShareUrlModal()"
-              />
-            </button>
-          </li>
-          <li>
-            <button
-              ref="actionDelete"
-              type="button"
-              class="action-delete"
-              :aria-label="translate('COM_MEDIA_ACTION_DELETE')"
-              :title="translate('COM_MEDIA_ACTION_DELETE')"
-              @keyup.enter="openConfirmDeleteModal()"
-              @keyup.space="openConfirmDeleteModal()"
-              @focus="focused(true)"
-              @blur="focused(false)"
-              @keyup.esc="hideActions()"
-              @keyup.up="$refs.actionShare.focus()"
-              @keyup.down="$refs.actionPreview.focus()"
-            >
-              <span
-                class="image-browser-action icon-trash"
-                aria-hidden="true"
-                @click.stop="openConfirmDeleteModal()"
-              />
-            </button>
-          </li>
-        </ul>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-import * as types from '../../../store/mutation-types.es6';
-
 export default {
   name: 'MediaBrowserItemVideo',
   // eslint-disable-next-line vue/require-prop-types
@@ -176,45 +36,13 @@ export default {
     };
   },
   methods: {
-    /* Preview an item */
-    openPreview() {
-      this.$store.commit(types.SHOW_PREVIEW_MODAL);
-      this.$store.dispatch('getFullContents', this.item);
-    },
-    /* Preview an item */
-    download() {
-      this.$store.dispatch('download', this.item);
-    },
-    /* Opening confirm delete modal */
-    openConfirmDeleteModal() {
-      this.$store.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_CONFIRM_DELETE_MODAL);
-    },
-    /* Rename an item */
-    openRenameModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_RENAME_MODAL);
-    },
-    /* Open modal for share url */
-    openShareUrlModal() {
-      this.$store.commit(types.SELECT_BROWSER_ITEM, this.item);
-      this.$store.commit(types.SHOW_SHARE_MODAL);
-    },
-    /* Open actions dropdown */
-    openActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionPreview.focus());
-    },
-    /* Open actions dropdown and focus on last element */
-    openLastActions() {
-      this.showActions = true;
-      this.$nextTick(() => this.$refs.actionDelete.focus());
-    },
     /* Hide actions dropdown */
     hideActions() {
-      this.showActions = false;
-      this.$nextTick(() => this.$refs.actionToggle.focus());
+      this.$refs.container.hideActions();
+    },
+    /* Preview an item */
+    openPreview() {
+      this.$refs.container.openPreview();
     },
   },
 };
diff --git a/administrator/components/com_media/resources/scripts/mediamanager.es6.js b/administrator/components/com_media/resources/scripts/mediamanager.es6.js
index 2a9d16ce348c9..52b763d2ec326 100644
--- a/administrator/components/com_media/resources/scripts/mediamanager.es6.js
+++ b/administrator/components/com_media/resources/scripts/mediamanager.es6.js
@@ -20,6 +20,9 @@ import Infobar from './components/infobar/infobar.vue';
 import Upload from './components/upload/upload.vue';
 import translate from './plugins/translate.es6';
 import store from './store/store.es6';
+import {
+  Rename, Toggle, Preview, Download, Share, Delete, Edit, Container,
+} from './components/browser/actionItems/export.es6';
 
 // Register MediaManager namespace
 window.MediaManager = window.MediaManager || {};
@@ -49,5 +52,13 @@ app.component('MediaShareModal', ShareModal);
 app.component('MediaConfirmDeleteModal', ConfirmDeleteModal);
 app.component('MediaInfobar', Infobar);
 app.component('MediaUpload', Upload);
+app.component('MediaBrowserActionItemToggle', Toggle);
+app.component('MediaBrowserActionItemPreview', Preview);
+app.component('MediaBrowserActionItemDownload', Download);
+app.component('MediaBrowserActionItemRename', Rename);
+app.component('MediaBrowserActionItemShare', Share);
+app.component('MediaBrowserActionItemDelete', Delete);
+app.component('MediaBrowserActionItemEdit', Edit);
+app.component('MediaBrowserActionItemsContainer', Container);
 
 app.mount('#com-media');
diff --git a/package-lock.json b/package-lock.json
index d87844cf12731..eac988587fb32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8171,4 +8171,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file