Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Getting started
Jose Tamu
September 18, 2026 /  Intermediate /  Light

Global Search

How it works

Global Search is a modal overlay that searches your pages and posts. Place it once on the page and open it with a trigger class, a shortcut, or both.
Display in the builder: if enabled, the search will be opened at the builder so you can style it.
Trigger: element that opens the search, passed by it’s classname.
Z-index: z-index of the overlay and the stage.
Include pages: if enabled, pages will be listed in the results.
Max pages: maximum number of pages listed. Shown when Include pages is enabled.
Include posts: if enabled, posts will be listed in the results.
Max posts: maximum number of posts listed. Shown when Include posts is enabled.

Global overlay controls

Justify content: horizontal alignment of the modal inside the overlay.
Align items: vertical alignment of the modal inside the overlay.
Padding: padding of the overlay stage.

Modal controls

Height: height of the modal.
Gap: gap inside the modal.
Padding: padding of the modal.
Background: background of the modal.
Border: border of the modal.
Box shadow: box shadow of the modal.

Search controls

Icon: icon shown next to the input.
Icon size: size of the icon.
Icon color: color of the icon.
Gap: gap between the icon and the input.
Text: placeholder of the input.
Typography: typography of the input and it’s placeholder.
Padding: padding of the search field.
Background: background of the search field.
Border: border of the search field.
Box shadow: box shadow of the search field.

Pages controls

Shown when Include pages is enabled.
Padding: padding of the pages group.
Background: background of the pages group.
Border: border of the pages group.
Box shadow: box shadow of the pages group.
Label
Label: heading of the pages group.
Typography: typography of the label.
Margin: margin of the label.

Page item controls

Shown when Include pages is enabled.
Icon: icon of each page item.
Icon size: size of the icon.
Icon color: color of the icon.
Padding: padding of each page item.
Gap: gap between the icon and the name.
Typography: typography of the page name.
Hover
Background: background of a page item on hover.
Border: border of a page item on hover.
Box shadow: box shadow of a page item on hover.
Duration: duration of the hover transition.
CSS easing: CSS easing of the hover transition.

Posts controls

Shown when Include posts is enabled.
Padding: padding of the posts group.
Background: background of the posts group.
Border: border of the posts group.
Box shadow: box shadow of the posts group.
Label
Label: heading of the posts group.
Typography: typography of the label.
Margin: margin of the label.

Post item controls

Shown when Include posts is enabled.
Icon: icon of each post item.
Icon size: size of the icon.
Icon color: color of the icon.
Padding: padding of each post item.
Gap: gap between the icon and the name.
Typography: typography of the post name.
Hover
Background: background of a post item on hover.
Border: border of a post item on hover.
Box shadow: box shadow of a post item on hover.
Duration: duration of the hover transition.
CSS easing: CSS easing of the hover transition.

Empty state controls

Text: text shown when there are no results.
Typography: typography of the empty state.

Overlay controls

Background: background of the overlay behind the modal.
Blur: backdrop blur of the overlay.

Animation controls

Overlay fade
Duration: duration of the overlay fade.
CSS easing: CSS easing of the overlay fade.
Modal transform
Transform origin: transform origin of the modal.
Transform Y: starting translateY of the modal.
Transform X: starting translateX of the modal.
Duration: duration of the modal transform.
CSS easing: CSS easing of the modal transform.
Modal opacity
Duration: duration of the modal fade.
CSS easing: CSS easing of the modal fade.
Modal scale
Scale: starting scale of the modal.
Duration: duration of the modal scale.
CSS easing: CSS easing of the modal scale.

Accessibility controls

Close when pressing ESC key: if enabled, pressing ESC will close the search.
Shortcut: opens and closes the search. Single keys like / work even if the layout needs Shift (e.g. Shift+7). Examples: /, Ctrl+K, Cmd+K.

– Tamu

On this page