--- title: Tabs slug: archbee-docs/tabs docTags: createdAt: 2024-07-24T11:17:19.000Z --- ![](https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-qlzuX6ak9nYvTvfqGAc1q-20240822-125616.png) Tabs is a block that allows you to organize content into multiple sections within a single document. It's like a set of tabs that you can click on to reveal different information. Think of it as a way to create multiple pages within one page. ## Why to use it - **Organize complex content** Group related content into separate tabs for better structure and readability. - **Improve readability** Make your content easier to navigate and understand. - **Save space** Use eficiently the space by displaying content sequentially rather than all at once. - **Create interactive experiences** Engage users by allowing them to actively choose the information they want to see. ## How to use the Tabs block ::::::WorkflowBlock :::WorkflowBlockItem Type `/` to open Archbee block menu ::: :::WorkflowBlockItem Search for **Tabs** block and click to insert insert ![](https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-eXhqk7Cgjios95U2j8it8-20240822-124946.png) ::: :::WorkflowBlockItem Customize your tab's and names. By default, the block is created with 2 tabs named "Tab Name" and "Second Tab Name". To rename a tab, you have to enter in edit label mode by: - Double-clicking on the tab label - Or hitting the "Edit label" icon ( ) Press on save ( ) to update the label, or press on discard ( **↩** ) to undo changes. ::: :::::WorkflowBlockItem Feel free to add your content. You can style the content however you like using the [WYSIWYG Menu](#) or even insert other blocks, like: ::::LinkArray :::LinkArrayItem Basic Blocks - [Headings](docId\:HJdVQeZ0tJqfx88wgF7xN) - [Expandable Headings](docId\:AjsWvF22qDvfTdJc0Px_w) - [Lists](docId\:aRskGvFrwY6-wF6cKKC4f) - [Table](docId:5jjvgmCHSEPuczlmsv_rP) - [Button](docId\:Q4ygEtpY55LbxC3yEgb58) - [Callout](docId\:u_-mnLN9zIkGr4dgRPnHj) - [Horizontal Divider](docId:-qJ6Yd_DxXPXUtHngNvM6) - [Vertical Split](docId\:bK1ECIyJCRP5dxUagYvpn) - [Minitaskers](docId\:VBPilliw66GF-N8EXlw2_) - [Link Blocks](docId\:HGrVGF0SidjsxxdOEgY-U) - [Workflow](docId\:l8ULbqrXNCx6Nv5kgGB8G) ::: :::LinkArrayItem Media Blocks - [File](docId:2Fz6hcIMG9kghdshL630-) - [Image](docId\:C3qLCZS4vLdWK6dONt8Mh) - [Video](docId\:WpJbOyKMAOIklvJJvkL03) - [Map](docId\:kY9_8MhDRxhD2Pm-UXNdL) ::: :::LinkArrayItem Developer Blocks - [Code editor: multi-language](docId\:gMPIwu0zyM-oauZOueD5S) - [Mermaid diagrams](docId\:ZUeSSwHGR2uzGesT1a3LA) - [TeX Ecuation](docId\:WG2EUJwT_v7IPYSRIMpa2) - [API endpoints](docId\:mjNPSMLHDsG2R9Hj9qLIs) - [OpenAPI/Swagger block](docId\:tYuHjUUqqI-WtZcjXaaQG) - [Changelog](docId\:HkG-FpEJJzHiN8O9Jml8S) ::: :::: Also, most of our integrations work inside tab block. You can add embeds from other tools like Loom, Figma, Miro, Lucidcharts, and more. Check the [Embedded Blocks.](<./././INTEGRATIONS/Embed Examples.md>) page for more info. ::::: :::::: ## Markdown Here's how to create a tab in your document using markdown code: :::::WorkflowBlock :::WorkflowBlockItem Start with the `:::tabs` line. ::: ::::WorkflowBlockItem Each tab content goes between `:::tab` and `:::` markers. :::hint{type="warning"} **🚨 Attention!** A colon `:` should be placed in a parent markdown element to signify that it encloses another markdown element. ::: In this case, `:::tabs` will change to `::::tabs` . Give each tab a title with curly braces like `{title="Your Section Name"}`. This is the name that will show on the tab header. :::: :::WorkflowBlockItem Put the content you want in this tab between those lines. See above the allowed blocks to be used inside the tab block. Check [Use Markdown shortcuts](<././Use Markdown shortcuts.md>) page to see how to use other blocks using markdown. ::: :::WorkflowBlockItem Create as many tabs you want and close your tab block. Don't forget to add columns for each nested level. Below is an example of a tab block using markdown. ::: ::::: ```markdown ## Tabs :::::tabs ::::tab{title="Tab 1"} Some content for Tab 1 :::hint{style="info"} Pull requests are very welcome! Please see CONTRIBUTING.md for more information. Tthis is really nice ::: - [x] This is a checkbox list - [x] This is a checkbox list - [ ] This is done - [ ] This is a checkbox list :::: :::tab{title="Tab Photos"} ![](https://placehold.co/600x400) We would love you to contributeaaa ::: ::::: ``` Here is the result: :::::Tabs ::::Tab{title="Tab 1"} Some content for Tab 1 :::hint{type="info"} Pull requests are very welcome! Please see CONTRIBUTING.md for more information. This is really nice ::: - [x] This is a checkbox list - [x] This is a checkbox list - [ ] This is done - [ ] This is a checkbox list :::: :::Tab{title="Tab Photos"} ::Image[]{src="https://placehold.co/600x400" size="50" isUploading="false" darkWidth="600" darkHeight="400" width="600" height="400" showCaption="false"} We would love you to contributeaaa ::: ::::: Alternatively, use this flavour of Markdown to generate a tabs block. ```markdown :::::tabs ::::tab{title="tab 2"} some tab fasdfasdfasdfasdfads :::: ::::tab{title="tab 2"} some tab fasdfasdfasdfasdfads :::: ::::tab{title="tab 2"} some tab fasdfasdfasdfasdfads :::: ::::tab{title="tab 2"} some tab fasdfasdfasdfasdfads :::: ::::: ``` Check the [Use Markdown shortcuts](<././Use Markdown shortcuts.md>) page to see more markdown shortcuts for other blocks. ## Examples See on [vertical split page, example sections.](docId\:bK1ECIyJCRP5dxUagYvpn) *** ::::LinkArray :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} ** Find other blocks** Discover new ways and blocks to create stunning and functional documentation pages. [Check out all blocks](<././Editor Blocks.md>) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} \&#xNAN;** Need help? ⬇️** Use the **blue** **chat bubble **from bottom right corner. Or try **AI Chat** (from search box) for quick answers. ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://app.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} \&#xNAN;** Your opinion matters** Use the below feedback form, anonymously. Or ask a question in **Q\&A section** and our team or AI will give you a solution. ::: ::::