The preview search widget with menu on the left

The preview search widget template, described in this topic, shows search results based on visitor query and menu options appearing on the left for left-to-right keyboard navigation. Changes in input in the search input field triggers requests to Sitecore Search.

The following sections describe the preview search widget template with menu on the left, and contains an API reference, and instructions on how to create code blocks that you can add to the WidgetsProvider in your React project using Search JS SDK for React. The widget uses the preview search query hook to request and retrieve data.

To create a widget component, you can choose to use Search UI components CLI, a command line interface, or copy and paste code blocks manually.

Generate or create the component

Important

Remember to adjust the entity model in the widget template to match your implementation.

Plain component

TS CLI

With the Sitecore Search CLI you can replicate all necessary files of the widget template in your React project. The following procedure includes instructions for installing the CLI in your project and specifying the location where widget components are created.

If you have previously installed the CLI in your project and have a location defined in a file called .sc-search-settings.json, you can proceed directly to step 3.

To install the UI Components CLI in your project:

To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx install --save-dev @sitecore-search/cli
```
To define the location of where widget components will be created, at the root of your project, in a file called .sc-search-settings.json, specify the location as shown in the following code block.
RequestResponse
```
{
    "components-path": "src-test/components"
}
```
To create the widget component, go to the location you defined in the .sc-search-settings.json file then open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx sc-search new-widget --language typescript --template preview-search-left --entity content --styling plain
```

Styled component

TS CLI

If you have previously installed the CLI in your project and have a location defined in a file called .sc-search-settings.json, you can proceed directly to step 3.

To install the UI Components CLI in your project:

To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx install --save-dev @sitecore-search/cli
```
To define the location of where widget components will be created, at the root of your project, in a file called .sc-search-settings.json, specify the location as shown in the following code block.
RequestResponse
```
{
    "components-path": "src-test/components"
}
```
To create the widget component in index.tsx and styled.ts files, go to the location you defined in the .sc-search-settings.json file then open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx sc-search new-widget --language typescript --template preview-search-left --entity content --styling styled
```

CSS styled component

TS CLI

If you have previously installed the CLI in your project and have a location defined in a file called .sc-search-settings.json, you can proceed directly to step 3.

To install the UI Components CLI in your project:

To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx install --save-dev @sitecore-search/cli
```
To define the location of where widget components will be created, at the root of your project, in a file called .sc-search-settings.json, specify the location as shown in the following code block.
RequestResponse
```
{
    "components-path": "src-test/components"
}
```
To create the widget component in index.tsx and styles.css files, go to the location you defined in the .sc-search-settings.json file then open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx sc-search new-widget --language typescript --template preview-search-left --entity content --styling css
```

CSS module styled component

TS CLI

If you have previously installed the CLI in your project and have a location defined in a file called .sc-search-settings.json, you can proceed directly to step 3.

To install the UI Components CLI in your project:

To install the Search UI Components CLI, open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx install --save-dev @sitecore-search/cli
```
To define the location of where widget components will be created, at the root of your project, in a file called .sc-search-settings.json, specify the location as shown in the following code block.
RequestResponse
```
{
    "components-path": "src-test/components"
}
```
To create the widget component in index.tsx and styles.module.css files, go to the location you defined in the .sc-search-settings.json file then open the terminal of your IDE or command prompt and run the following command:
RequestResponse
```
npx sc-search new-widget --language typescript --template preview-search-left --entity content --styling cssModule
```

Options

Items per page

defaultItemsPerPage sets the maximum number of items displayed in this component.

Default: 6

RequestResponse

<PreviewSearchLeft
	rfkId="rfkid_6"
 	defaultItemsPerPage={12}
/>

Do you have some feedback for us?

If you have suggestions for improving this article,