
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








