Default Layout

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.

1. Install Docsearch

   Install all Algolia Docsearch dependencies via NPM.

   terminal

   Copied

   Copy

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

2. Import Styles

   Import all Algolia Docsearch styles into your layout file.

   routes/docs/__layout.svelte

   Copied

   Copy

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

3. Import Component

   Import the Algolia component into your layout file.

   routes/docs/__layout.svelte

   Copied

   Copy

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

4. Add Markup

   Add the <Algolia> component to your markup and also set the search prop on <KitDocsLayout>.

   routes/docs/__layout.svelte

   Copied

   Copy

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