Interactive position map for the Atomic template for Joomla. Use this to plan your site layout or migrate from Cassiopeia.
| Atomic position | Cassiopeia equivalent | Notes | |
|---|---|---|---|
| {hero} | ← | {banner} | Cassiopeia {banner} content renders after Atomic's {hero} position when compatibility is on. They are not the same position — {hero} is always available, {banner} is Cassiopeia-only. |
| {topmenu} | ← | {menu} | Cassiopeia {menu} modules render inside the {topmenu} nav bar when compatibility is on. |
| {leftbody} | ← | {sidebar-left} | Both render in the left sidebar column. {leftbody} is Atomic-native (always available); {sidebar-left} only appears when Cassiopeia compatibility is on. |
| {rightbody} | ← | {sidebar-right} | Both render in the right sidebar column. {rightbody} is Atomic-native (always available); {sidebar-right} only appears when Cassiopeia compatibility is on. |
| {breadcrumbs} | ↔ | {breadcrumbs} | Same name. Always rendered (not behind compatibility toggle). |
| {footer} | ↔ | {footer} | Same name in both. |
| {debug} | ↔ | {debug} | Same name in both. |
| Atomic-only positions (no Cassiopeia equivalent) | |||
| {alert} | — | Top-of-page alert/notification bar. Renders before the header. | |
| {header} | — | Inside the header row, adjacent to logo/site title branding. | |
| {header-center} | — | Center column of the header row. | |
| {header-right} | — | Right side of the header row, before the style switcher. | |
| {topmenu} | — | Primary navigation bar below the header row. When Cassiopeia compatibility is on, {menu} modules also render here. | |
| {mobilemenu} | — | Offcanvas mobile navigation panel. Triggers a hamburger button in the header. | |
| {hero} | — | Full-width hero area at the top of main content, before the body columns. | |
| {abovebody} | — | Inside the main content column, between {breadcrumbs} and {main-top} / message output. | |
| {belowbody} | — | Inside the main content column, below the component output. | |
| {footer-center} | — | Center column of the footer (when 3-column footer layout is configured). | |
| {footer-right} | — | Right column of the footer. | |
| Cassiopeia-only positions (require "Support Cassiopeia positions" enabled) | |||
| {topbar} | → | Inside header | Renders inside the header container, before the header row. |
| {below-top} | → | Inside header | Renders inside the header container, after {topbar}. |
| {menu} | → | Inside topmenu nav | Renders inside the {topmenu} navigation bar. |
| {banner} | → | After {hero} | Renders in the main area, after the {hero} position. |
| {top-a} | → | After {banner} | Renders after {banner} in the main area. |
| {top-b} | → | After {banner} | Renders alongside {top-a}, after {banner}. |
| {sidebar-left} | → | Left column | Renders in the same left sidebar column as {leftbody}. |
| {sidebar-right} | → | Right column | Renders in the same right sidebar column as {rightbody}. |
| {main-top} | → | Center column | Renders inside the main content column, after {abovebody} and before the message/component output. |
| {main-bottom} | → | Center column | Renders inside the main content column, after {belowbody}. |
| {bottom-a} | → | Own row | Renders as a full-width row below the body columns. |
| {bottom-b} | → | Own row | Renders as a separate full-width row, below {bottom-a}. |
| Error page positions (both templates, used in error.php only) | |||
| {error-403} | ↔ | {error-403} | Same name in both. |
| {error-404} | ↔ | {error-404} | Same name in both. |
When moving from Cassiopeia to Atomic:
{banner} is not the same as Atomic's {hero} — when compatibility is on, {banner} content renders after {hero}. Similarly, {sidebar-left} and {sidebar-right} render alongside {leftbody} and {rightbody}, not in place of them. {menu} renders inside Atomic's {topmenu} nav bar.{topbar}, {below-top}, {top-a}, {top-b}, {bottom-a}, {bottom-b}, {main-top}, and {main-bottom} only work with compatibility on. Plan to migrate these modules to Atomic-native positions when ready.{alert}, {abovebody}, {belowbody}, {header}, {header-center}, {header-right}, {mobilemenu}, {footer-center}, and {footer-right} — none of which exist in Cassiopeia.