---
url: "https://vueda.dev/v3/reference/api/vue/SuggestionList.md"
title: "SuggestionList"
---

# SuggestionList

## Overview

Typed "Did you mean?" suggestion list for system 404 views. Renders an
uppercase head row with a mono source label above a bordered list of
clickable `router-link` rows. Two layout shapes are supported: `route`
(similarity score chip in the trailing column) and `action` (HTTP verb chip).
Each row is a 4-column grid: 24 px icon · 1fr label+sub · auto trailing ·
auto chevron. Kit canon: "At scale, 'Did you mean?' is a piece of UI, not
a sentence."

Theme entry: [SuggestionList](/v3/reference/theming/keys/SuggestionList.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-iconOverride">iconOverride</span> | `Object` |  | `null` | A partial icon registry (`{ [componentName]: { [iconName]: { component, props } } }`) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-items">items</span> | `{ icon?: import('vue').Component, label: string, sub?: string, score?: number, verb?: string, to: import('vue-router').RouteLocationRaw }[]` |  | `[]` | Suggestion rows. Each entry becomes one navigable row. |
| <span id="prop-head">head</span> | `string` |  | `undefined` | Uppercase head label displayed above the list (e.g. "Did you mean" or "Available actions"). |
| <span id="prop-source">source</span> | `string` |  | `undefined` | Mono source label beside the head (e.g. "router.suggest()"). |
| <span id="prop-shape">shape</span> | `string` |  | `"route"` | Row layout variant. `route` shows a similarity score chip in the trailing column; `action` shows an HTTP verb chip. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes applied to the root element. |

## Source

`client/lib/display/system-message/SuggestionList.vue`