EDITOR
Editor Blocks

Tabs

7min
Document image


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

1

Type / to open Archbee block menu

2

Search for Tabs block and click to insert insert

Document image

3

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.

4

Feel free to add your content. You can style the content however you like using the WYSIWYG Menu or even insert other blocks, like:

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 Embeded Blocks page for more info.

Markdown

Here's how to create a tab in your document using markdown code:

1

Start with the :::tabs line.

2

Each tab content goes between :::tab and ::: markers.

🚨 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.

3

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 page to see how to use other blocks using markdown.

4

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


Here is the result:

Tab 1
Tab Photos

Some content for Tab 1

Pull requests are very welcome! Please see CONTRIBUTING.md for more information. This is really nice

This is a checkbox list

This is a checkbox list

This is done

This is a checkbox list

Alternatively, use this flavour of Markdown to generate a tabs block.

Markdown


Check the Use Markdown shortcuts page to see more markdown shortcuts for other blocks.

Examples





🤔
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.



Updated 30 Sep 2024
Doc contributor
Did this page help you?