npm GitHub

Search

In this section, we'll look at how you can set up a search input field so users can quickly navigate through your documentation.

Slot

The default layout supports a search slot which will be positioned at the top of the sidebar. You can set it like so:

<KitDocsLayout search>
	<!-- Just an example, you'll need to build/style your own. -->
	<input type="text" placeholder="Search documentation" slot="search" />
</KitDocsLayout>

Algolia

We've prebuilt an Algolia search component and cleaned up the default styles. Head over to the Algolia Docsearch application form and apply for an API key. Next, follow the instructions below to get set up.

!!!step title="Install Docsearch"|description="Install all Algolia Docsearch dependencies via NPM."

npm i @docsearch/css @docsearch/js @algolia/client-search react react-dom @types/react -D

!!!

!!!step title="Import Styles"|description="Import all Algolia Docsearch styles into your layout file."

import '@docsearch/css' // Must come first.
import '@svelteness/kit-docs/client/styles/docsearch.css'

!!!

!!!step title="Import Component"|(slot=description)=Import the Algolia component into your layout file.

import { Algolia } from '@svelteness/kit-docs/client/algolia'

!!!

!!!step title="Add Markup"|(slot=description)=Add the <Algolia> component to your markup and also set the search prop on <KitDocsLayout>.

<KitDocsLayout search>
	<Algolia
		apiKey="599cec31baffa4868cae4e79f180729b"
		appId="R2IYF7ETH7"
		indexName="docsearch"
		placeholder="Search documentation"
		slot="search"
	/>
	<!-- ... -->
</KitDocsLayout>

!!!