Navigation methods

Current version: 10.3

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

Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Phones/Habitat_Master-Smartphones/6042327

/shop/Smartphones%3dhabitat_master-smartphones/HabitatGoGo8GB4GLTEPrepaid%3d6042327

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.

Tip

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:

Diagram showing wildcard navigation.

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

Do you have some feedback for us?

If you have suggestions for improving this article,