> For the complete documentation index, see [llms.txt](https://knowledge.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledge.themeware.design/knowledge-base/introduction/configuring-the-shop-navigation.md).

# Configuring the shop navigation

The shop navigation (main navigation) is the category navigation in the header. You create the categories in Shopware, ThemeWare® defines the display.

## Step 1: Create the categories

1. Open the administration of your shop
2. Switch via the main navigation to "**Catalogues**" => "**Categories**"
3. Create your categories and subcategories
   * Category type "**Page / List**": a category with associated products and a layout
   * Category type "**Structuring element / Entry point**": only used for outlining purposes and not callable by itself
   * Category type "**Link**": a reference to a product, another category, a landing page or an external site
4. Make sure that all categories are set to "**Active**"
5. Save your categories

## Step 2: Check the entry point in the Sales Channel

1. Open your Sales Channel via the main navigation
2. Switch to the tab "**General**"
3. Check the field "**Entry point main navigation**" in the card "**Navigation**"
4. Define with the "**Navigation levels**" how many category levels are loaded
5. Save the Sales Channel

{% hint style="warning" %}
**Attention**: The "Navigation levels" of the Sales Channel are the upper limit. Categories below that level are not loaded into the storefront at all and therefore cannot be displayed by ThemeWare® either.
{% endhint %}

## Step 3: Configure the top navigation

1. Switch via the main navigation to the "**theme administration**" ("Content" => "Themes")
   * **Note**: In the Shopware Cloud you will find the "Themes" area directly in the main navigation.
2. Now click on your ThemeWare® theme to start editing
3. Switch to the tab "**Header**"
4. Open the block "**Top navigation**"
5. Select at "**Top navigation**" how the navigation is displayed:
   * "**don't show**"
   * "**show list**"
   * "**show hamburger menu**"
6. In the section "**Basic configuration**" you configure among others "**Show home link**", "**Show arrows**", the "**Hover effect**" and the "**Height**"
7. In the sections "**Colour configuration**" and "**Typography**" you adjust colours, font family, font size and text formatting

## Step 4: Configure the submenus (flyout)

1. Open the block "**Top navigation flyout**"
2. Select at "**Top navigation flyout**" the display of the submenus:
   * "**Shopware default**"
   * "**ThemeWare® Flyout**"
   * "**ThemeWare® Dropdown**"
   * "**ThemeWare® Flyout with cards**"
   * "**ThemeWare® Flyout with sidebar**"
   * "**ThemeWare® Flyout with teasers**"
3. In the section "**Basic configuration**" define with the "**Navigation levels**" how many category levels are displayed
4. In the section "**Design**" you select the desired design for the "**Flyout**" and the "**Dropdown navigation**"

{% hint style="success" %}
**Tip**: Each category can override the global setting "Top navigation flyout" individually via the category custom field "Top navigation flyout".
{% endhint %}

## Step 5: Mobile navigation

You configure the mobile navigation separately:

* Tab "**Content**" => Block "**Offcanvas navigation**"

## Step 6: Save and check

1. Save the theme configuration
2. Switch to the storefront and reload the page

You have now configured the shop navigation.

***

## Further information

* Introduction: [Configuring the service navigation](/knowledge-base/introduction/configuring-the-service-navigation.md)
* Introduction: [Adapting the design of the category page](/knowledge-base/introduction/adapting-the-design-of-the-category-page.md)