Left and right sidebar

A sidebar is a side area next to the main content. It can carry filters, supplementary navigation, or related information, but it should not compete with the most important content in the middle of the page.

What you will learn

  • Understand the relationship between the left sidebar (leftbox), mainbox, and right sidebar (rightbox).
  • Decide when a side panel genuinely helps.
  • Insert modules into positions inside a sidebar.
  • Safely disable a panel and verify the responsive result.
Right and left column
Right and left column - sidebar

Three parts of the main layout

Mainbox is the core central area where the main component content is displayed. To its left and right, there can be side panels, or sidebars. Each sidebar contains its own rows and Joomla positions for modules.

A side panel is suitable for categories, filters, contact boxes, or additional links. It is not a good place for long main text or for an element without which a visitor cannot use the page. On smaller screens, the layout stacks, and the sidebar may shift below the main content or be hidden depending on settings.

How to prepare a sidebar

  1. In Grid mode, find the left or right side panel and enable it.
  2. A side area does not have its own boxed or fluid setting.
  3. In Modules mode, drag a suitable supported module into the highlighted position.
  4. Switch the preview to tablet and mobile. Verify the order and ensure the main content still has enough space.
  5. If you want to disable a panel that contains modules, read the confirmation prompt and move the modules first if you wish to retain them.

Why sidebars are protected

The mainbox and both original side panels form the core skeleton of the template. They cannot be arbitrarily moved or permanently deleted like regular custom rows. However, supported duplication of a sidebar row can create a derived custom section, which then follows the rules of custom rows.

A product catalog offers a practical example. On desktop, the left sidebar can carry a filter while the mainbox holds the results. On a phone, however, a narrow panel next to results makes no sense, so the areas stack or you hide the filter according to design. The inert preview helps check order and space, but it does not filter real products. Therefore, verify the live module, its keyboard navigation, and return to results after installation. If the filter is the only gateway to key content, do not hide it without a mobile alternative.

Consider using two sidebars simultaneously just as carefully. On a wide monitor, they may look organized, but they can easily leave too narrow a column for the main article. Start with a single panel and enable a second one only if it serves its own clear purpose.

Disabled panel containing modules

Disabling an area can hide the modules embedded inside it. The editor requires confirmation for destructive changes. First check the sidebar contents in Layers and move important modules elsewhere.

Next step: Module catalog and its categories.