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

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

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

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

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

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

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