thegeneralyst/AnopaDocs
Catalog & Search

Search Navigator

Search submit button that navigates to a search results page with the current query as ?q=searchterm, with Active and Disabled design states.

What it does

AP_SearchNavigator is a search submit button. When clicked, it navigates the user to a designated search results page with the current query appended as ?q=searchterm in the URL. It has two design slots: Active (query exists) and Disabled (no query typed yet).

APSearchInput writes the query to a shared store; APSearchNavigator reads that query and handles navigation.

How to set it up

  1. Place APSearchNavigator next to APSearchInput in your navigation or search bar.

Property Controls

ControlTypeDefaultDescription
Search PageString/searchPath of the search results page that AP_SearchNavigator navigates to, e.g. `/search`.
New TabBooleanfalseIf true, opens the search results page in a new browser tab instead of the current tab.
ActiveComponent InstanceComponent instance shown when there is a non-empty query and the button is clickable.
DisabledComponent InstanceComponent instance shown when the query is empty; clicking does nothing and appears with reduced opacity.
Preview