---
title: "Sidebar navigation"
url: "https://support.acendy.com/en/article/sidebar-navigation"
language: "en"
last_updated: "2026-05-15T08:15:26.403Z"
---

# Sidebar navigation

The sidebar nav is a fixed-width navigation panel that sits to the left of the main page content on desktop. It shows a hierarchical category tree with optional links to specials, new products, brands, and static pages. It's off by default and has to be explicitly enabled.

## Adding and configuring the sidebar section

The sidebar's content is managed through a dedicated section type called **Sidebar Navigation**. This section lives in the **Header** template slot in the Design Builder — not in the page body. The layout engine picks it up from the header data and renders it into the sidebar column.

To set up the sidebar:

1.  Open **Design Builder → Header**.
2.  Add a **Sidebar Navigation** section.
3.  The section will only appear in the sidebar column, not inline in the header itself.

In the Design Builder preview, the sidebar layout activates automatically the moment a `sidebar_builder` section exists in the header template — even if the global **Enable sidebar** setting is still `false`. This lets you design and preview the sidebar without affecting the live storefront.

## Section settings

The `sidebar_builder` section wraps all its blocks and controls the sidebar's overall appearance.

| Setting | What it does | Default |
| --- | --- | --- |
| **Background color** | Background of the entire sidebar | Inherited from page |
| **Text color** | Default text color inside the sidebar | Inherited from page |
| **Border width** | Thickness of the sidebar border (px) | 1px |
| **Border color** | Color of the border | `#e5e7eb`<br>(light grey) |
| **Border side** | Which side the border appears on | Right |
| **Padding** | Inner spacing (top/bottom/left/right) | 16px top and bottom |
| **Margin** | Outer spacing | None |
| **Custom class** | CSS class added to the section element | — |
| **Sidebar width** | Width of the sidebar navigation | 340px |

**Border side** accepts: `right`, `left`, `both`, or `none`. The default `right` border acts as a visual divider between the sidebar and the main content area.

* * *

## The Sidebar Menu block

The main content inside a sidebar section is a **Sidebar Menu** block. It renders the full category tree and optionally appends links for specials, new products, brands, and static pages.

### Content options

| Setting | What it does | Default |
| --- | --- | --- |
| **Always expanded** | Open all category branches on load | Off |
| **Max depth** | Limit how many levels deep the tree renders (0–3, or unlimited) | Unlimited |
| **Show specials** | Append a link to the Specials page | Off |
| **Show new products** | Append a link to the New Products page | Off |
| **Show brands** | Append a link to the Brands page | Off |
| **Show static pages** | Append links from the static pages menu | Off |

When **Always expanded** is off, parent categories that contain subcategories show a chevron toggle. Clicking the chevron expands or collapses that branch. Categories along the path to the current page expand automatically regardless of this setting.

The active category (the one matching the current page) is highlighted in bold. You can customise what "active" looks like with the colour settings below.

The **Max depth** setting (`megamenu_no_lvl`) controls how many levels render. Setting it to `0` shows only top-level categories. `1` shows one level of subcategories. Leave it at `initial` (the default) to render the full tree.

Static page links use the label names from the site's menu configuration. Specials and new products labels respect the overrides in **Global Settings → General** (`specials_menu_name`, `news_menu_name`) if set.

### Colour settings

| Setting | What it does |
| --- | --- |
| **Hover text color** | Link text colour on hover |
| **Hover background** | Link background on hover |
| **Active text color** | Text colour for the currently active link |
| **Active background** | Background for the currently active link |

All four default to `inherit`/`transparent` if not set.

### Per-level typography and indentation

Each of the four depth levels (0–3) has independent controls for font size, font weight, text colour, and left indent. This lets you visually distinguish depth — for example, larger bold text for top-level categories and smaller grey text for subcategories.

| Level | Default font size | Default indent |
| --- | --- | --- |
| Level 0 (top) | 0.9rem | 8px |
| Level 1 | 0.85rem | 24px |
| Level 2 | 0.8rem | 40px |
| Level 3 | 0.75rem | 56px |

Indent is the left padding applied to each link. It increases with depth to create the visual hierarchy. You can set it anywhere from 0 to 60px in 2px increments.

* * *

## Mobile behaviour

The sidebar is hidden on screens narrower than the `md` breakpoint (768px). There's no mobile fallback — the sidebar simply doesn't appear. On mobile, customers navigate through the existing mobile menu instead.

If you need navigation on mobile, keep the header's mobile menu configured separately. The sidebar and mobile menu are independent.

* * *

## Tips

-   You can add more than one block to a `sidebar_builder` section. The allowed block types are **Sidebar Menu**, **Heading**, and **Paragraph**, so you can add a heading above the menu or a short text block below it.
-   The sidebar column width is fixed — it doesn't flex with the content. Set `max_width` to a value that works across your typical category tree depth and font size.
-   If the sidebar looks correct in the Template Configurator preview but doesn't appear on the live storefront, check that **Enable sidebar** is set to `true` in Global Settings.
-   The sidebar section must be in the **Header** template slot. Adding it to any other template slot (footer, page body etc.) won't reder it in the sidebar column.