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	Required	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' &#124; 'table' &#124; '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		() =&gt; 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		() =&gt; 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.