# Tabs A tabbed container: you write page content inside it, and each Tab macro you place starts a new tab. Reach for this when one page has to serve several audiences or several stages, Overview / Setup / Troubleshooting, or one tab per environment, and you would rather not make the reader scroll past the parts that are not theirs. You place the Tabs macro on the page, then inside its body you place a Tab macro to name each tab and write the tab's content underneath it. Anything is allowed inside a tab: text, tables, images, other macros. The tab strip itself is fully styleable, four header looks, three sizes, brand colours for the active and inactive tabs, and an optional bordered container around the whole thing. ![image-20260907-110247.png](https://help.gocapable.com/images/fdd9d00a-b599-4080-83eb-361776dd6b8b.webp) --- ## See it Every example below is a real macro on this page, not a screenshot, and each one is a configuration taken from a page somebody actually built. Open this page in the editor to see how any of them is set up. ### Solid, vertical, left Tab 1Tab 2Tab 3 This is tab 1 This is tab 2 This is tab 3 ### Solid, horizontal, left Getting startedGuidelinesTroubleshootingAbout usText Welcome aboard! You can include formatting, tables and images, panels etc. ℹ️ Here is a panel | **Table** | **Table** | **Table** | | --------- | --------- | --------- | This is some more text This is some cards - we are working to align the styling. [![Banana](https://images.unsplash.com/photo-1528825871115-3581a5387919?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MDM1MTR8MHwxfHNlYXJjaHwxfHxiYW5hbmF8ZW58MHx8fHwxNzU0MTY2OTY1fDA&ixlib=rb-4.1.0&q=80&w=1080)BananaBananas are soft, yellow and sweet - great with porridge oats.](https://www.gocapable.com) [![Mango](https://images.unsplash.com/photo-1551649001-9c071b61f26c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MDM1MTR8MHwxfHNlYXJjaHwxOHx8bWFuZ298ZW58MHx8fHwxNzU0MTcwNDI1fDA&ixlib=rb-4.1.0&q=80&w=1080)MangoMangoes are a tropical fruit which are very sweet. Try it with pineapple.](https://www.gocapable.com) [![Orange](https://images.unsplash.com/photo-1592187270271-9a4b84faa228?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MDM1MTR8MHwxfHNlYXJjaHw3fHxvcmFuZ2V8ZW58MHx8fHwxNzU0MTY3NTMyfDA&ixlib=rb-4.1.0&q=80&w=1080)OrangeOranges are a round citrus fruit - great for breakfast, ideally juiced!](https://www.gocapable.com) You can include macros like diagrams within tabs. ![Simple profiling diagram](https://help.gocapable.com/images/att1120534530.svg) We’re a small, cross‑functional team focused on making complex tasks simple. Our aim is to deliver clear, reliable solutions that help people get work done with confidence. Camera Icon This is a tab with some text inside it. ### Solid, horizontal, left (2) Tab 1Tab 2Tab 3 This is tab 1 This is tab 2 This is tab 3 --- ## Settings | **Setting** | **Values** | **What it changes** | | ----------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Tabs Alignment | left, center, right | Where the tab strip sits above the panel. Called "Align Tabs" in the underlying schema. | | Show Container | On / Off | Draws a border around the whole tab group. | | Tabs Orientation | Horizontal, Vertical | Horizontal puts the tab strip above the content; Vertical puts it in a sidebar down the left, at least 200px tall. | | Tab style | Underline, Pills, Enclosed, Solid | How the tab headers are drawn. Solid fills the active tab with a colour block and bolds it; Pills is a segmented control; Underline is a flat strip with an accent underline; Enclosed gives the active tab a folder-tab outline. Call | | Tab size | Small, Medium, Large | Padding and font size of the tab headers. Called "Tab Size" in the underlying schema. | | Active | A brand-palette colour or custom hex; empty = theme colour | Colour of the selected tab. For Underline and Enclosed this is the text and underline colour; for Solid it is the LABEL colour sitting on the fill. Called "Active Tab Colour" in the underlying schema. | | Inactive | A brand-palette colour or custom hex; empty = theme colour | Colour of the tabs that are not selected. Called "Inactive Tab Colour" in the underlying schema. | | Tab background | A brand-palette colour or custom hex; empty = theme highlight | Fills the selected tab. Used most by the Solid style; on the other styles it tints the active tab. | | Tab corner radius | 0 to 24 (px slider) | Rounds the individual tab headers. Called "Tab Corner Radius" in the underlying schema. | | Corner radius | 0 to 24 (px slider) | Rounds the outer container. Only visible when Show Container is on. Called "Container Corner Radius" in the underlying schema, and it sits in a "Container" section of the Style tab. | | Border colour | A brand-palette colour or custom hex; empty = theme border | Colour of the container border. Only visible when Show Container is on. Called "Container Border Colour" in the underlying schema. | --- ## Related [ButtonsA row or column of styled buttons that link out to a website or across to another Confluence pa](https://help.gocapable.com/macros/buttons.html) [TabA marker that starts a new tab inside a Tabs macro and gives it its name.](https://staging.dev.capable-sites.com/wiki/pages/1412956280) [Buttons and navigationThe rest of this family.](https://help.gocapable.com/macros/buttons-and-navigation.html) --- _The two most used macros here._