Filtering

The V2 sidebar exposes its filter, sort, group, and search behavior declaratively through inputs. Filters and sorts are described as data; the sidebar renders the matching surfaces and applies the selections client-side via applyCommentSidebarClientFilters(). There are three filter surfaces, each driven by its own input:

filters — the Main Filter bottom-sheet/menu surface.
miniFilters — a single header funnel dropdown.
minimalFilters — multiple header dropdowns. When present, these replace the single funnel dropdown.

filters

Define the Main Filter panel sections.
Pass an array of FilterField to define sections. Built-in fields are referenced by field id; custom fields use valuePath.
When passed an object keyed by field (e.g. { status: ['open'] }) instead of FilterField[], it is treated as a set of active filter selections and applied directly.

Default: []

React / Next.js
Other Frameworks

const filters = [
  { field: 'status' },
  { field: 'assigned' },
  { field: 'authorName', label: 'Written By', valuePath: 'from.name' },
];

<VeltCommentsSidebarV2 filters={filters} />

<velt-comments-sidebar-v2></velt-comments-sidebar-v2>
<script>
  const sidebar = document.querySelector('velt-comments-sidebar-v2');
  sidebar.filters = [
    { field: 'status' },
    { field: 'assigned' },
    { field: 'authorName', label: 'Written By', valuePath: 'from.name' },
  ];
</script>

Active-selections object form — pass an object keyed by field instead of a FilterField[] to apply active filter selections directly:

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 filters={{ status: ['open'], people: ['1.1', '2.3'] }} />

<velt-comments-sidebar-v2></velt-comments-sidebar-v2>
<script>
  const sidebar = document.querySelector('velt-comments-sidebar-v2');
  sidebar.filters = { status: ['open'], people: ['1.1', '2.3'] };
</script>

miniFilters

Render a single header funnel dropdown with one section per field.

Default: []

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 miniFilters={[{ field: 'status' }, { field: 'priority' }, { field: 'involved' }]} />

<velt-comments-sidebar-v2></velt-comments-sidebar-v2>
<script>
  const sidebar = document.querySelector('velt-comments-sidebar-v2');
  sidebar['mini-filters'] = [{ field: 'status' }, { field: 'priority' }, { field: 'involved' }];
</script>

minimalFilters

Renders one or more dropdowns in the sidebar header (these replace the single miniFilters funnel when present).
Each entry in the array creates one dropdown. The entry’s type decides what that dropdown contains, and the matching input (fields, sorts, or actions) provides its content.

Default: []

Filter-dropdown `type` scoping

`type`	The dropdown shows	Built from
`filter`	Category checkbox sections (e.g. status, priority, assignee)	`fields`
`sort`	Single-select sort options (e.g. by date or unread)	`sorts`
`quick`	One-click filters (presets and/or path predicates)	`actions`
`actions`	A combined menu: a sort group and a quick group separated by a divider	`sorts` + `actions`
(unset)	Default quick presets plus any configured sections	—

A path predicate is a rule that keeps only comments whose value at a given field path matches. For example, { path: 'from.userId', value: '1.1' } keeps comments authored by the user with id 1.1. The value is a literal (there is no @me token), and paths auto-flatten nested arrays (e.g. comments.taggedUserContacts.contact.userId). Each dropdown is rendered by the filter-dropdown primitive (VeltCommentSidebarV2FilterDropdown / velt-comment-sidebar-filter-dropdown-v2). The examples below show one dropdown per type. filter — category checkboxes (built from fields):

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 minimalFilters={[{ type: 'filter', fields: [{ field: 'status' }, { field: 'priority' }] }]} />

<velt-comments-sidebar-v2 minimal-filters='[{"type":"filter","fields":[{"field":"status"},{"field":"priority"}]}]'></velt-comments-sidebar-v2>

sort — sort options (built from sorts):

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 minimalFilters={[{ type: 'sort', sorts: ['date', 'unread'] }]} />

<velt-comments-sidebar-v2 minimal-filters='[{"type":"sort","sorts":["date","unread"]}]'></velt-comments-sidebar-v2>

quick — one-click filters (built from actions — presets and/or path predicates):

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2
  minimalFilters={[
    { type: 'quick', actions: ['open', 'resolved', { label: 'Written By Me', path: 'from.userId', value: '1.1' }] },
  ]}
/>

<velt-comments-sidebar-v2 minimal-filters='[{"type":"quick","actions":["open","resolved",{"label":"Written By Me","path":"from.userId","value":"1.1"}]}]'></velt-comments-sidebar-v2>

To match several paths in one quick filter, give an action a list of conditions plus an operator:

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2
  minimalFilters={[
    {
      type: 'quick',
      actions: [{
        label: 'Involved',
        operator: 'or',
        conditions: [
          { path: 'from.userId', value: '1.1' },
          { path: 'assignedTo.userId', value: '1.1' },
          { path: 'comments.taggedUserContacts.contact.userId', value: '1.1' },
        ],
      }],
    },
  ]}
/>

<velt-comments-sidebar-v2
  minimal-filters='[{"type":"quick","actions":[{"label":"Involved","operator":"or","conditions":[{"path":"from.userId","value":"1.1"},{"path":"assignedTo.userId","value":"1.1"},{"path":"comments.taggedUserContacts.contact.userId","value":"1.1"}]}]}]'>
</velt-comments-sidebar-v2>

actions — combined sort + quick menu (built from sorts + actions, separated by a divider):

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2
  minimalFilters={[
    {
      type: 'actions',
      sorts: ['date', 'unread'],
      actions: [
        { preset: 'resolved', label: 'Show resolved comments' },
        { label: 'Only your mentions', path: 'comments.taggedUserContacts.contact.userId', value: '1.1' },
      ],
    },
  ]}
/>

<velt-comments-sidebar-v2
  minimal-filters='[{"type":"actions","sorts":["date","unread"],"actions":[{"preset":"resolved","label":"Show resolved comments"},{"label":"Only your mentions","path":"comments.taggedUserContacts.contact.userId","value":"1.1"}]}]'>
</velt-comments-sidebar-v2>

Combine multiple dropdowns — pass several entries to render them side by side:

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2
  minimalFilters={[
    { type: 'filter', fields: [{ field: 'status' }] },
    { type: 'sort', sorts: ['date', 'unread'] },
    { type: 'quick', actions: ['open', 'resolved'] },
  ]}
/>

<velt-comments-sidebar-v2 minimal-filters='[{"type":"filter","fields":[{"field":"status"}]},{"type":"sort","sorts":["date","unread"]},{"type":"quick","actions":["open","resolved"]}]'></velt-comments-sidebar-v2>

Prefer configuring dropdowns through minimalFilters as shown above. If you need to place or restyle a dropdown directly in your own markup, you can set these same inputs on the filter-dropdown primitive — see Comment Sidebar V2 Primitives.

defaultMinimalFilter

Set the default active quick filter applied on load (one of the minimalFilters quick presets).
Type: 'all' | 'read' | 'unread' | 'resolved' | 'open' | 'assignedToMe' | 'reset'

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 defaultMinimalFilter="open" />

<velt-comments-sidebar-v2 default-minimal-filter="open"></velt-comments-sidebar-v2>

filterOperator

Control how active selections across different filter sections combine.
Options: and or or

Default: and

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 filterOperator="or" />

<velt-comments-sidebar-v2 filter-operator="or"></velt-comments-sidebar-v2>

filterPanelLayout

Change the layout of the Main Filter panel.
Options: bottomSheet or menu

Default: bottomSheet

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 filterPanelLayout="menu" />

<velt-comments-sidebar-v2 filter-panel-layout="menu"></velt-comments-sidebar-v2>

filterOptionLayout

Change how options render within a filter section.
Options: dropdown or checkbox

Default: dropdown

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 filterOptionLayout="checkbox" />

<velt-comments-sidebar-v2 filter-option-layout="checkbox"></velt-comments-sidebar-v2>

filterCount

Show per-option facet counts. Disabling improves performance.

Default: true

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 filterCount={false} />

<velt-comments-sidebar-v2 filter-count="false"></velt-comments-sidebar-v2>

systemFiltersOperator

Specify whether system filters are combined with an and or or operator.

Default: and

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebarV2 systemFiltersOperator="or" />

Using API:

const commentElement = client.getCommentElement();
commentElement.setSystemFiltersOperator('or');

<velt-comments-sidebar-v2 system-filters-operator="or"></velt-comments-sidebar-v2>

filterGhostCommentsInSidebar

Filter out and hide ghost comments from the sidebar.

Default: false

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebarV2 filterGhostCommentsInSidebar={true} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enableFilterGhostCommentsInSidebar();
commentElement.disableFilterGhostCommentsInSidebar();

<velt-comments-sidebar-v2 filter-ghost-comments-in-sidebar="true"></velt-comments-sidebar-v2>

excludeLocationIds

Filter out comments from certain locations. These comments are not displayed in the sidebar.

Default: []

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebarV2 excludeLocationIds={['location1', 'location2']} />

Using API:

const commentElement = client.getCommentElement();
commentElement.excludeLocationIdsFromSidebar(['location1', 'location2']);

<velt-comments-sidebar-v2 exclude-location-ids='["location1", "location2"]'></velt-comments-sidebar-v2>

customActions

Enable custom actions in the sidebar so you can add your own wireframe-driven controls.

Default: false

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebarV2 customActions={true} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enableSidebarCustomActions();
commentElement.disableSidebarCustomActions();

<velt-comments-sidebar-v2 custom-actions="true"></velt-comments-sidebar-v2>

applyCommentSidebarClientFilters

Apply client-provided CommentSidebarFilters to a set of annotations, honoring the current systemFiltersOperator.

React / Next.js
Other Frameworks

const commentElement = client.getCommentElement();
const filtered = commentElement.applyCommentSidebarClientFilters(annotations, filters);

const commentElement = Velt.getCommentElement();
const filtered = commentElement.applyCommentSidebarClientFilters(annotations, filters);

Sorting

sortBy

Set the default sort field. This sets the default sort, it does not render a sort dropdown.
Type: SortBy — a built-in preset (e.g. 'date', 'unread') or a custom field key / dot-path (e.g. 'comments.createdAt').

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 sortBy="comments.createdAt" />

<velt-comments-sidebar-v2 sort-by="comments.createdAt"></velt-comments-sidebar-v2>

sortOrder

Set the default sort direction.
Type: SortOrder ('asc' | 'desc')

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 sortOrder="desc" />

<velt-comments-sidebar-v2 sort-order="desc"></velt-comments-sidebar-v2>

sortData

Provide a custom-field sort path used when sorting by a custom field.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 sortData="comments.createdAt" />

<velt-comments-sidebar-v2 sort-data="comments.createdAt"></velt-comments-sidebar-v2>

Grouping

groupConfig

Configure grouping in the sidebar. Grouping defaults to by-location when enabled.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 groupConfig={{ enable: true, groupBy: 'location' }} />

<velt-comments-sidebar-v2></velt-comments-sidebar-v2>
<script>
  const sidebar = document.querySelector('velt-comments-sidebar-v2');
  sidebar.setAttribute('group-config', JSON.stringify({ enable: true, groupBy: 'location' }));
</script>

onCommentClick

Listen for click events on comments in the sidebar to trigger actions like navigation.
The event callback provides access to the clicked comment’s annotation object, which includes location and context data.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 onCommentClick={onCommentClick} />

const onCommentClick = (event) => {
  const { pageId } = event.location;
  yourNavigateToPageMethod(pageId);
};

const onCommentClick = (event) => {
  const { pageId } = event.detail.location;
  yourNavigateToPageMethod(pageId);
};

const commentElement = document.querySelector('velt-comments-sidebar-v2');
commentElement.addEventListener('onCommentClick', onCommentClick);

onCommentNavigationButtonClick

Triggered when the navigation button in the comment dialog in the sidebar is clicked.
Use this event to implement custom navigation logic.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 onCommentNavigationButtonClick={onCommentNavigationButtonClick} />

const onCommentNavigationButtonClick = (event) => {
  const { pageId } = event.location;
  yourNavigateToPageMethod(pageId);
};

const commentSidebarElement = document.querySelector('velt-comments-sidebar-v2');
commentSidebarElement.addEventListener('onCommentNavigationButtonClick', (event) => {
  console.log('onCommentNavigationButtonClick', event.detail);
});

urlNavigation

Enable automatic URL navigation when clicking comments in the sidebar.
By default, clicking a comment doesn’t update the page URL where the comment was added.

Default: false

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebarV2 urlNavigation={true} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enableSidebarUrlNavigation();
commentElement.disableSidebarUrlNavigation();

<velt-comments-sidebar-v2 url-navigation="true"></velt-comments-sidebar-v2>

enableUrlNavigation is a deprecated alias for urlNavigation. Prefer urlNavigation.

queryParamsComments

Sync the selected comment to URL query params.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 queryParamsComments={true} />

<velt-comments-sidebar-v2 query-params-comments="true"></velt-comments-sidebar-v2>

UI

pageMode

Adds a composer in the sidebar where users can add comments without attaching them to any specific element.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 pageMode={true} />

<velt-comments-sidebar-v2 page-mode="true"></velt-comments-sidebar-v2>

focusedThreadMode

When you click a comment in the sidebar, it opens the thread in an expanded view within the sidebar itself.
Other threads and actions like filters and search are hidden behind a back button.
Enabling this mode also adds a navigation button in the comment dialog.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 focusedThreadMode={true} />

<velt-comments-sidebar-v2 focused-thread-mode="true"></velt-comments-sidebar-v2>

openAnnotationInFocusMode

When enabled, opens the comment dialog in focus mode when focusedThreadMode is enabled and either the reply button is clicked or a comment is selected via selectCommentByAnnotationId().
Requires focusedThreadMode to be enabled.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 focusedThreadMode={true} openAnnotationInFocusMode={true} />

<velt-comments-sidebar-v2 focused-thread-mode="true" open-annotation-in-focus-mode="true"></velt-comments-sidebar-v2>

readOnly

Make comment dialogs in the sidebar read-only to prevent users from editing comments.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 readOnly={true} />

<velt-comments-sidebar-v2 read-only="true"></velt-comments-sidebar-v2>

embedMode

Add the sidebar inline within your component; it takes up the full width and height of its container.
In embed mode, the sidebar does not have a close button. Implement your own open/close on the host component.

Default: null

React / Next.js
Other Frameworks

<div className="sidebar-container">
  <VeltCommentsSidebarV2 embedMode={true} />
</div>

<div class="sidebar-container">
  <velt-comments-sidebar-v2 embed-mode="true"></velt-comments-sidebar-v2>
</div>

floatingMode

Open the sidebar in an overlay panel that floats over the page content.
If you use this mode, do not add the sidebar component to your app separately.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 floatingMode={true} />

<velt-comments-sidebar-v2 floating-mode="true"></velt-comments-sidebar-v2>

position

Change the side of the viewport the sidebar opens from.
Options: left or right

Default: right

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 position="left" />

<velt-comments-sidebar-v2 position="left"></velt-comments-sidebar-v2>

variant

Set the layout variant of the sidebar.

Default: sidebar

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 variant="inline" />

<velt-comments-sidebar-v2 variant="inline"></velt-comments-sidebar-v2>

dialogVariant

Set the variant for the embedded comment dialog rendered in the list.

Default: sidebar

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 dialogVariant="sidebar" />

<velt-comments-sidebar-v2 dialog-variant="sidebar"></velt-comments-sidebar-v2>

focusedThreadDialogVariant

Set the variant for the focused-thread dialog.

Default: sidebar

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 focusedThreadDialogVariant="sidebar" />

<velt-comments-sidebar-v2 focused-thread-dialog-variant="sidebar"></velt-comments-sidebar-v2>

pageModeComposerVariant

Set the variant for the page-mode composer.

Default: sidebar

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 pageModeComposerVariant="sidebar" />

<velt-comments-sidebar-v2 page-mode-composer-variant="sidebar"></velt-comments-sidebar-v2>

forceClose

Force the sidebar to close on outside click, even when opened programmatically via API.

Default: true

This does not affect embed mode sidebar.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 forceClose={true} />

<velt-comments-sidebar-v2 force-close="true"></velt-comments-sidebar-v2>

fullScreen

Add a fullscreen toggle button to the header. In fullscreen mode the sidebar expands to fill the viewport.
Observe state changes with the onFullscreenClick event.

Default: false

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebarV2 fullScreen={true} onFullscreenClick={(e) => console.log('fullscreen', e)} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enableFullScreenInSidebar();
commentElement.disableFullScreenInSidebar();

<velt-comments-sidebar-v2 full-screen="true"></velt-comments-sidebar-v2>
<script>
  const sidebar = document.querySelector('velt-comments-sidebar-v2');
  sidebar.addEventListener('onFullscreenClick', (e) => console.log('fullscreen', e));
</script>

fullExpanded

Render the sidebar fully expanded.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 fullExpanded={true} />

<velt-comments-sidebar-v2 full-expanded="true"></velt-comments-sidebar-v2>

shadowDom

Render the sidebar body inside a shadow root for style isolation.
Shadow-DOM isolation is enabled by default. Opt out by setting shadow-dom="false" or calling disableSidebarShadowDOM().

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 shadowDom={false} />

<velt-comments-sidebar-v2 shadow-dom="false"></velt-comments-sidebar-v2>

currentLocationSuffix

Adds a “(this page)” suffix to the group name when the current location matches the group’s location.

Default: false

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 currentLocationSuffix={true} />

<velt-comments-sidebar-v2 current-location-suffix="true"></velt-comments-sidebar-v2>

dialogSelection

When disabled, clicking a comment in the sidebar triggers a click event instead of opening the dialog inline.

Default: true

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 dialogSelection={false} />

<velt-comments-sidebar-v2 dialog-selection="false"></velt-comments-sidebar-v2>

expandOnSelection

Control whether comment dialogs automatically expand when selected in the sidebar.

Default: true

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 expandOnSelection={false} />

<velt-comments-sidebar-v2 expand-on-selection="false"></velt-comments-sidebar-v2>

searchPlaceholder

Customize the placeholder text shown in the search input of the sidebar.

Default: Search comments

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 searchPlaceholder="New placeholder" />

<velt-comments-sidebar-v2 search-placeholder="New placeholder"></velt-comments-sidebar-v2>

commentPlaceholder

Customize the placeholder text for the dialog composer (the comment input that appears in comment dialogs/threads).

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 commentPlaceholder="Add a comment..." />

<velt-comments-sidebar-v2 comment-placeholder="Add a comment..."></velt-comments-sidebar-v2>

replyPlaceholder

Customize the placeholder text for reply input fields in the sidebar.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 replyPlaceholder="Write a reply..." />

<velt-comments-sidebar-v2 reply-placeholder="Write a reply..."></velt-comments-sidebar-v2>

pageModePlaceholder

Customize the placeholder text for the page-mode composer.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 pageModePlaceholder="Add a page comment..." />

<velt-comments-sidebar-v2 page-mode-placeholder="Add a page comment..."></velt-comments-sidebar-v2>

editPlaceholder

Customize the placeholder text shown when editing an existing comment or reply.
Use editCommentPlaceholder for the first comment and editReplyPlaceholder for replies; both take precedence over editPlaceholder.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2
  editPlaceholder="Edit..."
  editCommentPlaceholder="Edit comment..."
  editReplyPlaceholder="Edit reply..."
/>

<velt-comments-sidebar-v2
  edit-placeholder="Edit..."
  edit-comment-placeholder="Edit comment..."
  edit-reply-placeholder="Edit reply...">
</velt-comments-sidebar-v2>

sidebarButtonCountType

Change what the sidebar button count reflects.
- default: total count of comments in open and in-progress states.
- filter: count of filtered comments.

React / Next.js
Other Frameworks

Using Props:

<VeltCommentsSidebarV2 sidebarButtonCountType="filter" />

Using API:

const commentElement = client.getCommentElement();
commentElement.setSidebarButtonCountType('filter');

<velt-comments-sidebar-v2 sidebar-button-count-type="filter"></velt-comments-sidebar-v2>

context

Pass custom context data to page-mode composer comments in the sidebar. The provided context object is attached to any comment added via the page-mode composer.

Default: null

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 context={{ jobId: 'job-page-mode', jobStatus: 'page comment' }} />

const commentSidebarElement = document.querySelector('velt-comments-sidebar-v2');
commentSidebarElement?.setAttribute('context', JSON.stringify({ jobId: 'job-page-mode', jobStatus: 'page comment' }));

Virtual scrolling

The V2 list uses virtual scrolling. Tune it with measuredSize (estimated row size in px), minBufferPx, and maxBufferPx.

Defaults: measuredSize = 220, minBufferPx = 1000, maxBufferPx = 2000

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 measuredSize={220} minBufferPx={1000} maxBufferPx={2000} />

<velt-comments-sidebar-v2 measured-size="220" min-buffer-px="1000" max-buffer-px="2000"></velt-comments-sidebar-v2>

Events

onSidebarOpen

Callback fired when the sidebar opens.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 onSidebarOpen={(data) => console.log('opened', data)} />

const sidebar = document.querySelector('velt-comments-sidebar-v2');
sidebar.addEventListener('onSidebarOpen', (e) => console.log('opened', e.detail));

onSidebarClose

Callback fired when the sidebar closes.

React / Next.js
Other Frameworks

<VeltCommentsSidebarV2 onSidebarClose={(data) => console.log('closed', data)} />

const sidebar = document.querySelector('velt-comments-sidebar-v2');
sidebar.addEventListener('onSidebarClose', (e) => console.log('closed', e.detail));

Sidebar controls

openCommentSidebar / closeCommentSidebar / toggleCommentSidebar

Programmatically open, close, or toggle the sidebar.

React / Next.js
Other Frameworks

const commentElement = client.getCommentElement();
commentElement.openCommentSidebar();
commentElement.closeCommentSidebar();
commentElement.toggleCommentSidebar();

const commentElement = Velt.getCommentElement();
commentElement.openCommentSidebar();
commentElement.closeCommentSidebar();
commentElement.toggleCommentSidebar();

For V2 wireframe and primitive customization, see Comment Sidebar V2 Structure and Comment Sidebar V2 Primitives. The sidebar is shadow-DOM isolated by default.

​Filtering

​filters

​miniFilters

​minimalFilters

Filter-dropdown type scoping

​defaultMinimalFilter

​filterOperator

​filterPanelLayout

​filterOptionLayout

​filterCount

​systemFiltersOperator

​filterGhostCommentsInSidebar

​excludeLocationIds

​customActions

​applyCommentSidebarClientFilters

​Sorting

​sortBy

​sortOrder

​sortData

​Grouping

​groupConfig

​Navigation

​onCommentClick

​onCommentNavigationButtonClick

​urlNavigation

​queryParamsComments

​UI

​pageMode

​focusedThreadMode

​openAnnotationInFocusMode

​readOnly

​embedMode

​floatingMode

​position

​variant

​dialogVariant

​focusedThreadDialogVariant

​pageModeComposerVariant

​forceClose

​fullScreen

​fullExpanded

​shadowDom

​currentLocationSuffix

​dialogSelection

​expandOnSelection

​searchPlaceholder

​commentPlaceholder

​replyPlaceholder

​pageModePlaceholder

​editPlaceholder

​sidebarButtonCountType

​context

​Virtual scrolling

​Events

​onSidebarOpen

​onSidebarClose

​Sidebar controls

​openCommentSidebar / closeCommentSidebar / toggleCommentSidebar

Filtering

filters

miniFilters

minimalFilters

Filter-dropdown `type` scoping

defaultMinimalFilter

filterOperator

filterPanelLayout

filterOptionLayout

filterCount

systemFiltersOperator

filterGhostCommentsInSidebar

excludeLocationIds

customActions

applyCommentSidebarClientFilters

Sorting

sortBy

sortOrder

sortData

Grouping

groupConfig

Navigation

onCommentClick

onCommentNavigationButtonClick

urlNavigation

queryParamsComments

UI

pageMode

focusedThreadMode

openAnnotationInFocusMode

readOnly

embedMode

floatingMode

position

variant

dialogVariant

focusedThreadDialogVariant

pageModeComposerVariant

forceClose

fullScreen

fullExpanded

shadowDom

currentLocationSuffix

dialogSelection

expandOnSelection

searchPlaceholder

commentPlaceholder

replyPlaceholder

pageModePlaceholder

editPlaceholder

sidebarButtonCountType

context

Virtual scrolling

Events

onSidebarOpen

onSidebarClose

Sidebar controls

openCommentSidebar / closeCommentSidebar / toggleCommentSidebar