--- meta: title: Slash Menu description: A keyboard-driven list of quick insertions, anchored to the caret of the field that opened it. layout: component --- {% raw %} `` is the panel behind a slash menu. Most of the time you don't use it directly — a component drives it for you, as [`zn-textarea`](/components/textarea#slash-menu-quick-insertions) does with its [`zn-slash-item`](/components/slash-item) entries: ```html:preview ``` Slot one into a textarea when you want the panel's own settings — `max-items`, `placement`, `empty-text`, its width, or the `heading` the list is announced by — declared in markup. The textarea then drives your menu instead of building its own: ```html:preview

``` Reach for the component on its own when you are adding a slash menu to a control the library doesn't cover. It renders and positions the list; the `SlashMenuController` watches a text field, tracks the query and inserts the result. ## Examples ### Driving It Directly Set `items`, position the panel with `anchor` (an element or a [virtual element](https://floating-ui.com/docs/virtual-elements)), and call `show()`. The menu emits `zn-slash-item-select` when an item is chosen. That event does not cross shadow boundaries, so a component that hosts the menu in its shadow root re-emits it as its own public event. ```html:preview

``` ### Keyboard Navigation The menu doesn't listen for keys itself — whatever owns the field decides which keys belong to the menu, then calls `moveActive()`, `selectActive()` and `hide()`. Disabled items are skipped, and moving past either end wraps around. ```html:preview Toggle

↑

↓

Enter

``` ### Grouping Items An item's `group` puts a heading above it. The heading is drawn whenever the group changes going down the list, so items sharing a group must be declared together — the menu lists them in the order it is given rather than gathering them for you. Leave the group off and an item is listed under no heading at all; declared first, those lead the list, which is how a handful of favourites can sit above named sections. ```html:preview

``` Group headings are only a structure for browsing: a query ranks every match on merit, and the headings follow whatever order that leaves. Set `order` on an item to pin its place within a match band, and use `keywords` to make it findable by terms that aren't in its label. Driving the menu yourself, the same thing is a `group` on each item: ```html:preview Open the menu

``` ### Keyboard Hints A footer pinned to the bottom of the panel spells out the keys the menu answers to. The list scrolls beneath it, so the hints stay in view. Use `hide-hints` on menus driven entirely by the mouse, or where the surrounding UI already explains the shortcuts. ```html:preview

``` ### Recently Used Set `recent-key` and the menu remembers what was chosen there, listing the most recent of those items above the rest under their own heading. The key is where the menu is used — `page-body`, `ticket-reply` — so each place keeps its own history in `localStorage`, and two fields that should share one can share a key. `max-recent` caps the section (3 by default), `recent-heading` names it, and `clearRecent()` forgets the lot. The section stands aside as soon as there is a query, when the ranked matches are the better answer. It reads as one more group, so it sits naturally above [grouped items](#grouping-items) — the section's own heading, then the sections the list already had. Insert a few from the first field below to see it fill: ```html:preview

Forget them

``` Where the items below carry no heading of their own, a rule closes the section off instead. This field shares nothing with the one above — each key is its own history: ```html:preview ``` `zn-input`, `zn-inline-edit`, `zn-translations` and `zn-remarkd-editor` take the same `slash-recent-key`. On a menu you slot in yourself, or drive with `SlashMenuController`, set `recent-key` on the `zn-slash-menu` directly. ### Truncating Long Lists `max-items` caps how many items are rendered; the rest are reported in a footer rather than silently dropped. The list scrolls when its content exceeds `--slash-menu-max-height`. ```html:preview

``` ### Attaching It To Your Own Field `SlashMenuController` is the reusable half. Give it the field, the menu, and the items; it handles trigger detection, filtering, keyboard handling and insertion. ```js import {SlashMenuController} from '@kubex/zinc'; class MyEditor extends ZincElement { private slash = new SlashMenuController(this, { menu: () => this.shadowRoot.querySelector('zn-slash-menu'), items: () => [{label: 'Brand name', value: '{{BRAND_NAME}}', icon: 'tag@lu'}], trigger: () => '/', onSelect: (item, query) => !this.emit('my-select', {detail: {item, query}}).defaultPrevented, onInsert: (item, value) => this.emit('my-insert', {detail: {item, value}}) }); firstUpdated() { this.slash.attach(this.shadowRoot.querySelector('textarea')); } } ``` Items can be shared between fields by registering them once as a preset: ```js import {registerSlashMenuPreset} from '@kubex/zinc'; registerSlashMenuPreset('legal', [ {label: 'Brand name', value: '{{BRAND_NAME}}', icon: 'tag@lu'}, {label: 'Jurisdiction', value: '{{JURISDICTION}}', icon: 'scale@lu'} ]); ``` Any component that reads presets — `zn-textarea` via `slash-preset="legal"` — then offers the same list. {% endraw %}