CnActionsBar

Toolbar that combines an item count display, a primary Add button, a view-mode toggle (Cards / Table), and an overflow actions menu containing Refresh, Import, Export, Copy-selected, and Delete-selected. All built-in mass actions are individually toggle-able.

Wraps: NcButton, NcActions

Try it

Loading CnActionsBar playground…

Usage

<CnActionsBar
  :pagination="pagination"
  :object-count="items.length"
  :selected-ids="selectedIds"
  add-label="Add Client"
  add-icon="AccountGroup"
  @add="createNew"
  @refresh="reload"
  @show-import="openImport"
  @show-export="openExport"
  @show-copy="openMassCopy"
  @show-delete="openMassDelete"
  @view-mode-change="viewMode = $event" />

Custom action items can be injected into the overflow menu:

<CnActionsBar ...>
  <template #action-items>
    <NcActionButton @click="openReport">
      <template #icon><ChartBar :size="20" /></template>
      Export report
    </NcActionButton>
  </template>
</CnActionsBar>

Props

Prop	Type	Default	Description
`pagination`	Object	`null`	Pagination state `{ total, page, pages, limit }` — used to render "Showing X of Y"
`objectCount`	Number	`0`	Number of currently visible items
`selectable`	Boolean	`true`	Whether rows/cards can be selected
`selectedIds`	Array	`[]`	Currently selected item IDs — controls disabled state of mass actions
`addLabel`	String	`'Add'`	Label for the primary Add button
`addIcon`	String	`''`	MDI icon name for the Add button (falls back to Plus)
`showAdd`	Boolean	`true`	Whether to show the Add button
`addDisabled`	Boolean	`false`	Whether the Add button is disabled
`viewMode`	String	`'table'`	Current view mode: `'table'`, `'cards'`, or `'map'`
`showViewToggle`	Boolean	`true`	Whether to show the Cards/Table toggle (each option carries a leading icon)
`cardsLabel`	String	`''`	Label for the cards/grid view-toggle option (defaults to "Cards")
`tableLabel`	String	`''`	Label for the table/list view-toggle option (defaults to "Table")
`cardsIcon`	String	`''`	MDI icon name for the cards option (defaults to the built-in grid icon); resolved via CnIcon
`tableIcon`	String	`''`	MDI icon name for the table option (defaults to the built-in list icon); resolved via CnIcon
`showMap`	Boolean	`false`	Whether to render the third "Map" toggle segment. Off by default, so existing two-segment consumers are unchanged
`mapLabel`	String	`''`	Label for the map view-toggle option (defaults to "Map"). Only shown when `showMap`
`mapIcon`	String	`''`	MDI icon name for the map option (defaults to the built-in map-marker icon); resolved via CnIcon
`showSearch`	Boolean	`false`	Show an inline search field on the left of the bar; emits `search` on input
`searchValue`	String	`''`	Current value of the inline search field (controlled)
`searchPlaceholder`	String	`''`	Placeholder / accessible label for the inline search field
`refreshing`	Boolean	`false`	Whether a refresh is currently in progress
`refreshDisabled`	Boolean	`false`	Whether the Refresh action is disabled
`showMassImport`	Boolean	`true`	Whether to show the Import action
`showMassExport`	Boolean	`true`	Whether to show the Export action
`showMassCopy`	Boolean	`true`	Whether to show the Copy selected action
`showMassDelete`	Boolean	`true`	Whether to show the Delete selected action
`inlineActionCount`	Number	`2`	How many actions to show inline (rest go in overflow)
`showRequestFeature`	Boolean	`false`	Show a built-in "Request a feature" entry in the overflow (after Refresh + headerActions). Emits `@request-feature`; the host opens the CnSuggestFeatureModal

Events

Event	Payload	Description
`add`	—	Add button clicked
`refresh`	—	Refresh action triggered
`request-feature`	—	Built-in "Request a feature" overflow item clicked (only when `showRequestFeature`)
`view-mode-change`	`'table'` \| `'cards'`	View toggle changed
`show-import`	—	Import action triggered
`show-export`	—	Export action triggered
`show-copy`	—	Copy selected action triggered
`show-delete`	—	Delete selected action triggered
`clear-selection`	—	Selection strip's Clear control clicked; the host should empty its selection (`CnIndexPage` does this and re-emits `select` with `[]`)

Slots

Slot	Scope	Description
`after-search`	—	Refinement controls beside the search field on the bar's LEFT side (e.g. an `NcActions` filter menu with a funnel icon) — the left side groups the visual controls (search, filters, view toggle)
`filters`	—	Inline filter controls rendered inside the bar, between the view toggle and the add/actions (e.g. a `CnQuickFilterBar` segmented toggle).
`header-actions`	—	Extra buttons placed after the Add button, before the overflow menu
`action-items`	—	Extra `NcActionButton` items injected into the overflow menu
`mass-actions`	`{ count, selectedIds }`	Extra mass-action items at the bottom of the overflow menu (optional mirror of the strip's actions)
`selection-actions`	`{ count, selectedIds }`	The host's bulk-action buttons (NcButton family) in the contextual selection strip shown while `selectable` and a selection is active — the primary bulk-actions surface, with a live `role="status"` count and a built-in Clear control

Documentation link

Set documentationUrl to add a Documentation entry to the overflow menu (just before Request a feature). It renders as a link that opens the URL in a new tab (target="_blank", rel="noopener noreferrer"); customise the wording with documentationLabel. Empty (the default) hides it. This mirrors the widget Actions menu's Documentation entry. CnIndexPage forwards its own documentationUrl / documentationLabel props here.

Reference (auto-generated)

The tables below are generated from the SFC source via vue-docgen-cli. They reflect what's actually in CnActionsBar.vue and update automatically whenever the component changes.

Props

Name	Type	Default	Description
`pagination`	`object`	`null`	Pagination state: { total, page, pages, limit }
`objectCount`	`number`	`0`	Number of currently visible objects (for "Showing X of Y")
`selectable`	`boolean`	`true`	Whether rows/cards can be selected
`selectedIds`	`array`	`[]`	Currently selected IDs
`addLabel`	`string`	`() => t('nextcloud-vue', 'Add')`	Label for the Add button
`addIcon`	`string`	`''`	MDI icon name for the Add button (e.g. 'AccountGroup'). Falls back to Plus icon.
`inlineActionCount`	`number`	`0`	How many action buttons to show inline (rest go in overflow dropdown)
`showMassImport`	`boolean`	`true`	Whether to show the built-in mass Import action
`showMassExport`	`boolean`	`true`	Whether to show the built-in mass Export action
`showMassCopy`	`boolean`	`true`	Whether to show the built-in mass Copy action
`showMassDelete`	`boolean`	`true`	Whether to show the built-in mass Delete action
`viewMode`	`string`	`'table'`	Current view mode: 'table', 'cards', 'list', or 'map'
`availableViewModes`	`Array<'cards' \| 'table' \| 'list'>`	`['cards', 'table']`	Which view-mode segments to render, in order. Defaults to the historical two-segment control; add `'list'` to expose the list view.
`showViewToggle`	`boolean`	`true`	Whether to show the view-mode toggle
`cardsLabel`	`string`	`''`	Label for the cards/grid view-toggle option (defaults to "Cards")
`tableLabel`	`string`	`''`	Label for the table/list view-toggle option (defaults to "Table")
`cardsIcon`	`string`	`''`	MDI icon name for the cards option (defaults to the built-in grid icon). Resolved via CnIcon.
`tableIcon`	`string`	`''`	MDI icon name for the table option (defaults to the built-in list icon). Resolved via CnIcon.
`showMap`	`boolean`	`false`	Whether to render the "Map" segment in the view toggle (back-compat bridge; equivalent to adding 'map' to `availableViewModes`).
`mapLabel`	`string`	`''`	Label for the map view-toggle option (defaults to "Map").
`mapIcon`	`string`	`''`	MDI icon name for the map option (defaults to the built-in map-marker icon). Resolved via CnIcon.
`listLabel`	`string`	`''`	Label for the list view-toggle option (defaults to "List")
`listIcon`	`string`	`''`	MDI icon name for the list option (defaults to the built-in list icon). Resolved via CnIcon.
`showSortSelect`	`boolean`	`false`	Show a standalone sort dropdown (useful in card/list views).
`sortOptions`	`Array<{ value: string, label: string }>`	`[]`	Options for the sort dropdown.
`sortValue`	`string`	`''`	The currently selected sort option value (controlled).
`sortLabel`	`string`	`() => t('nextcloud-vue', 'Sort by')`	Accessible label for the sort dropdown.
`showSearch`	`boolean`	`false`	Whether to show the inline search field on the left of the bar
`searchValue`	`string`	`''`	Current value of the inline search field (controlled)
`searchPlaceholder`	`string`	`''`	Placeholder / accessible label for the inline search field
`refreshing`	`boolean`	`false`	Whether the refresh action is currently in progress
`refreshDisabled`	`boolean`	`false`	Whether the refresh action is disabled (e.g. when required selections are missing)
`addDisabled`	`boolean`	`false`	Whether the Add button is disabled (e.g. when required selections are missing)
`showAdd`	`boolean`	`true`	Whether to show the Add button
`showSidebarToggle`	`boolean`	`false`	Whether to show the Search/Columns sidebar toggle button. Lets the index sidebar default to closed and be opened on demand.
`sidebarOpen`	`boolean`	`false`	Current open state of the sidebar (controls the toggle's pressed state).
`headerActions`	`Array<{ id: string, label: string, icon?: string, disabled?: boolean }>`	`[]`	Manifest-declared page-level actions rendered in the overflow dropdown between Refresh and the `#action-items` slot. Each entry is `{ id, label, icon?, disabled? }`. The bar emits `@header-action({ action: id, id })` on click; handler resolution happens upstream (CnIndexPage).
`bulkActions`	`Array<{ id: string, label: string, icon?: string, disabled?: boolean }>`	`[]`	Declarative bulk actions, rendered in the contextual selection strip that appears while a selection is active. The strip already had a `#selection-actions` slot, which only a hand-written host component can fill — so a page declared in an app manifest could carry row actions and header actions but never a bulk one. This prop is that missing vocabulary; the slot stays, and both render side by side in one row. Clicking emits `bulk-action` with the id AND the current selection.
`documentationUrl`	`string`	`''`	When set, adds a Documentation entry to the overflow menu (after Refresh, before headerActions). Opens the URL in a new tab. Empty string hides the entry.
`documentationLabel`	`string`	`() => t('nextcloud-vue', 'Documentation')`	Label for the Documentation overflow entry.

Events

Name	Payload	Description
`view-mode-change`	—	User clicked one of the view-mode toggle buttons (Cards / Table). Payload is the selected mode string.
`toggle-sidebar`	—	User clicked the Search/Columns sidebar toggle. No payload.
`add`	—	User clicked the primary Add button. No payload.
`refresh`	—	User clicked the Refresh entry in the overflow Actions menu. The host should re-fetch the underlying list.
`header-action`	—	User clicked a manifest-declared page-level header action. Payload: `{ action: id, id }`.
`show-import`	—	User clicked the Import mass action. Host should open the import modal.
`show-export`	—	User clicked the Export mass action. Host should open the export modal.
`show-copy`	—	User clicked the Copy-selected mass action. Disabled while no row is selected.
`show-delete`	—	User clicked the Delete-selected mass action. Disabled while no row is selected.
`bulk-action`	—	Declarative bulk actions, from `bulkActions`. They render in the SAME strip as a host's slot buttons and before them, so a page that declares some in its manifest and hand-writes others gets one row of buttons rather than two groups in different places.
`clear-selection`	—	User clicked the selection strip's Clear control. No payload — the host should empty its selection (CnIndexPage does this and re-emits `select` with an empty array).
`search`	—	Emitted when the user types in the inline search field.
`sort-change`	—	Emitted when the user picks an option from the standalone sort dropdown.

Slots

Name	Bindings	Description
`after-search`	—	after-search Refinement controls rendered beside the search field on the LEFT side of the bar (e.g. a filter menu button). Convention: the left side groups the VISUAL controls — search, filters, view toggle — while the right cluster holds the ACT controls (add, overflow); the standalone sort select is a display control too but keeps its legacy right-side placement.
`filters`	—	filters Inline filter controls rendered inside the action bar, between the view toggle and the add/actions (e.g. a CnQuickFilterBar segmented toggle).
`actions`	—	actions
`action-items`	—	action-items
`mass-actions`	`count`, `selected-ids`	mass-actions
`selection-actions`	`count`, `selected-ids`	selection-actions The host app's bulk-action buttons (NcButton family), rendered inside the contextual selection strip that appears while a selection is active. This strip is the primary bulk-actions surface; #mass-actions remains available for hosts that ALSO want the actions listed in the overflow menu (optional — strip-only is fine).

Additional props

Prop	Type	Default	Description
`showSidebarToggle`	Boolean	`false`	Whether to show the Search/Columns sidebar toggle button (lets the index sidebar default to closed and open on demand).
`sidebarOpen`	Boolean	`false`	Current open state of the sidebar (controls the toggle button's pressed state).
`availableViewModes`	Array	`['cards','table']`	Which view-mode segments to show, in order (add `list`).
`listLabel`	String	`''`	Label for the list view-toggle option.
`listIcon`	String	`''`	MDI icon for the list view-toggle option.
`showSortSelect`	Boolean	`false`	Show a standalone sort dropdown (card/list views).
`sortOptions`	Array	`[]`	Options `{ value, label }` for the sort dropdown.
`sortValue`	String	`''`	Selected sort option value (controlled).
`sortLabel`	String	(i18n)	Accessible label for the sort dropdown.

Try it​

Usage​

Props​

Events​

Slots​

Documentation link​

Reference (auto-generated)​

Props​

Events​

Slots​

Additional props​

Try it

Usage

Props

Events

Slots

Documentation link

Reference (auto-generated)

Props

Events

Slots

Additional props