Mention

Vue Bootstrap 5 Mention plugin

Responsive Mention plugin built with the latest Bootstrap 5 and Vue 3. Mention is an autocomplete dropdown menu for your search inputs. It is useful for tagging users or topics.

Note: Read the API tab to find all available options and advanced customization

Basic example

Type @ and use up/down arrows, home/end keys to navigate. Click enter or use mouse click to choose item

Show code

Data from HTML

Mention component can be reached without setup initialization.

In such case list items should have proper data-mdb- attributes and list should have mention-data-items class.

Show code

Toggle show list on trigger

Showing all items on trigger key is turned on by default. Set showListOnTrigger prop to false to turn it off and show items only after user search input.

Show code

Placement example

Use placement prop to change placement of the component

Position of the component will be flipped to opposite side when no free space is available. Once enough space is detected, component will flip back to its original placement

Show code

Textarea example

Mention works also with textarea

Show code

Customize no results text

Set noResultsText to a text of your choice to change the message for no results found.

Show code

Trigger sign

Use trigger prop to change search triggering sign

Show code

Show image

Use showImage prop to show images in the mentions list

Show code

Visible items

Use visibleItems prop to change the number of options that will be displayed in the select dropdown without scrolling.

Show code

Multiple lists

Assign multiple mentions to the element by wrapping an input by any number of Mention elements.

Show code

Asynchronous data

Show code