Navigation methods
In SXA Storefront, there are two methods of navigation that you can implement: direct navigation and wildcard navigation. You enable the type of navigation you want for each storefront site. By default, new sites use direct navigation.
The following table highlights some of the benefits and uses of each method.
Direct navigation |
Wildcard navigation | |
---|---|---|
URL |
URL is more readable. |
Each product has a unique URL. Canonical URLs remain the same no matter where the catalogs are configured. |
Example |
|
|
Layout |
Unique page and partial designs for each catalog, category, or product. |
All categories use a single layout. All products use a single layout. |
Navigation menu |
Uses the Commerce Navigation rendering. |
Uses the Category Navigation rendering. |
Support for SXA components |
Broader support for SXA components out-of-the-box. |
No support for SXA components out-of-the-box. |
A video overview of navigation methods is available on the Discover Sitecore channel.
Direct navigation
With direct navigation, Sitecore creates a URL that replicates the structure of the catalog instead of going through the wildcard category or product item. This means each category or product is a different page within the site and URLs are more readable. Another advantage of direct navigation is that presentation, page events, goals, analytic profiles, campaigns, and personalization are all available from the catalog item. Because of this, each category and product in the catalog can be unique in terms of presentation and analytics.
Wildcard navigation
With wildcard navigation, Sitecore displays catalog content using a wildcard page for category data and a wildcard page for product data. A wildcard refers to an item in the content tree that consists of an asterisk (*) and it is used when building the page URL.
For example, when you use the Storefront site template, the following wildcard is defined:
When you view a product on the storefront, the asterisks are replaced with the category page and the product page. This results in a URL structure of /shop/<category page>/<product page>. For example:
/shop/Phones%3dhabitat_master-phones/HabitatFlip450%3d6042331
/shop/Drones%3dhabitat_master-drones/SeekerVI—4KHexacopter%3d7042134