autocomplete-theme-classic

The theme is designed as a neutral and clean starter. You can use it as a base and customize it with CSS variables.

If you want to build your own theme, you can start from the Classic theme and adjust it.

Installation# Found an issue? Edit this guide A Edit this guide

First, you need to install the theme.

1
2
3
yarn add @algolia/autocomplete-theme-classic
# or
npm install @algolia/autocomplete-theme-classic

Then import it in your project:

1
import '@algolia/autocomplete-theme-classic';

If you don’t use a package manager, you can link the style sheet in your HTML:

1
2
3
4
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic"
/>

CSS variables# Found an issue? Edit this guide A Edit this guide

The theme uses CSS variables that you can customize in your own CSS.

All colors are defined with two variables: one for the RGB values and one for the alpha layer. This lets you adjust each value independently.

Size and spacing #

Z-index #

Font #

Icons #

Text colors #

Border colors #

Background colors #

Detached mode #

Shadows #

Scrollbar #

To customize a value, you can create a custom style sheet and override the variable.

1
2
3
:root {
  --aa-icon-size: 24px;
}

Make sure to load these styles after the theme.

Templates# Found an issue? Edit this guide A Edit this guide

For the theme to work out of the box, you need to use a conventional CSS class set. All class names from the theme come with an aa- namespace to avoid interfering with your own styles.

Item#

Here’s the markup for an item template.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
autocomplete({
  // ...
  templates: {
    item({ item, components, html }) {
      return html`<div class="aa-ItemWrapper">
        <div class="aa-ItemContent">
          <div class="aa-ItemIcon">
            <img
              src="${item.image}"
              alt="${item.name}"
              width="40"
              height="40"
            />
          </div>
          <div class="aa-ItemContentBody">
            <div class="aa-ItemContentTitle">
              ${components.Highlight({ hit: item, attribute: 'name' })}
            </div>
            <div class="aa-ItemContentDescription">
              ${components.Snippet({ hit: item, attribute: 'description' })}
            </div>
          </div>
        </div>
        <div class="aa-ItemActions">
          <button
            class="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
            type="button"
            title="Select"
          >
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path
                d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"
              />
            </svg>
          </button>
        </div>
      </div>`;
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
autocomplete({
  // ...
  templates: {
    item({ item, components }) {
      return (
        <div className="aa-ItemWrapper">
          <div className="aa-ItemContent">
            <div className="aa-ItemIcon">
              <img src={item.image} alt={item.name} width="40" height="40" />
            </div>
            <div className="aa-ItemContentBody">
              <div className="aa-ItemContentTitle">
                <components.Highlight hit={item} attribute="name" />
              </div>
              <div className="aa-ItemContentDescription">
                <components.Snippet hit={item} attribute="description" />
              </div>
            </div>
          </div>
          <div className="aa-ItemActions">
            <button
              className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
              type="button"
              title="Select"
            >
              <svg
                viewBox="0 0 24 24"
                width="20"
                height="20"
                fill="currentColor"
              >
                <path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" />
              </svg>
            </button>
          </div>
        </div>
      );
    },
  },
});

Link item#

To wrap an item within a link, use the .aa-ItemLink class in place of the element with .aa-ItemWrapper. Make sure not to use both together.

1
2
3
4
5
6
7
8
autocomplete({
  // ...
  templates: {
    item({ item, html }) {
      return html`<a class="aa-ItemLink" href="${item.url}"> /* ... */ </a>`;
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
autocomplete({
  // ...
  templates: {
    item({ item }) {
      return (
        <a className="aa-ItemLink" href={item.url}>
          {/* ... */}
        </a>
      );
    },
  },
});

Header#

Here’s the markup for a header template.

1
2
3
4
5
6
7
8
9
10
autocomplete({
  // ...
  templates: {
    header({ html }) {
      return html`<span class="aa-SourceHeaderTitle">Products</span>
        <div class="aa-SourceHeaderLine" />`;
    },
    // ...
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
autocomplete({
  // ...
  templates: {
    header() {
      return (
        <Fragment>
          <span className="aa-SourceHeaderTitle">Products</span>
          <div className="aa-SourceHeaderLine" />
        </Fragment>
      );
    },
    // ...
  },
});

No results#

Here’s the markup for a noResults template.

1
2
3
4
5
6
7
8
9
autocomplete({
  // ...
  templates: {
    noResults() {
      return 'No products for this query.';
    },
    // ...
  },
});

Additional CSS classes# Found an issue? Edit this guide A Edit this guide

The theme provides a set of optional classes for you to use in different contexts.

Modifiers#

• .aa-ItemIcon--noBorder removes the border of the icon
• .aa-ItemIcon--alignTop aligns the icon to the top (recommended when the template is longer than three lines)
• .aa-ItemIcon--picture makes the icon larger (recommended when using an image and the template is longer than three lines)
• .aa-Panel--scrollable declares the scrollable containers of the panel

Utilities#

• .aa-ActiveOnly displays an element only when the item is active
• .aa-DesktopOnly displays an element only on desktop devices
• .aa-TouchOnly displays an element only on tap devices

Dark mode# Found an issue? Edit this guide A Edit this guide

The theme supports dark mode. You can enable it on the body tag in two different ways:

• <body data-theme="dark" />
• <body class="dark" />