Skip to main content
All CollectionsFAQEditor
Creating Tab Navigation
Creating Tab Navigation

Learn how to create tab navigation in STUDIO to organize content and make your page clean and easy to navigate.

Kelvin H. avatar
Written by Kelvin H.
Updated over a week ago

Tabs help you organize information, giving your page a tidy and streamlined look. Here’s a quick guide to creating tabs using STUDIO’s box and anchor link features.

スクリーンショット:タブ切り替え操作を行う様子。

Note

This tab implementation might not be fully accessible for all users, particularly those using keyboards.

Structure

Here’s what you’ll need:

  • Box: The main container

    • Heading Text: Titles for each section

    • Parent Box for Tabs: Holds all tabs together

      • Tab 1, Tab 2, Tab 3: Individual tabs

        • Tab Switch Buttons: For navigating between tabs

        • Content: Different content for each tab

スクリーンショット:タブ切り替えのレイヤー構成図。

Steps

1. Place a Box

Start by dragging a box from the left panel onto the canvas.

スクリーンショット:ページにボックスを配置する様子。

Expand the box and set padding for the top and bottom.

スクリーンショット:ボックスの上下にパディングを設定する様子。

2. Add Heading Text

Add a text box inside the main box and style it as needed.

スクリーンショット:見出しのテキストボックスを追加する様子。

3. Create Tabs

Add buttons inside the main box for switching between tabs.

スクリーンショット:タブの切り替えボタンを配置しデザインする様子。

Place content to display with Tab 1 (AAA).

スクリーンショット:タブ内に表示するコンテンツを配置・デザインする様子。

Select the parent box for the buttons and the parent box for content, then group them (⌘ + G).

スクリーンショット:タブ切り替えボタンとコンテンツをグループ化する様子。

Set the group’s width to 100% and make any necessary responsive design adjustments.

スクリーンショット:横幅とレスポンシブを調整する様子。

4. Duplicate Tabs

Copy the grouped box from earlier to create Tab 2 and Tab 3.

Set the height of the outermost box to “auto” and adjust the content and design of Tab 2 and 3.

スクリーンショット:タブを複製し、コンテンツとデザインを調整する様子。

5. Set IDs

Assign unique IDs to each grouped box containing buttons and content (e.g., tab-1, tab-2, tab-3) in the right panel.

スクリーンショット:タブごとにIDを設定する様子。

6. Add Anchor Links

Set anchor links on each tab switch button to connect to the corresponding content.

スクリーンショット:切り替えボタンにアンカーリンクを設定する様子。

7. Make Final Adjustments

Add padding to the top of each tab for smooth transitions.

スクリーンショット:各タブに上下パディングを追加する様子。

Select Tab 1, 2, and 3 together with "Shift" and group them (⌘ + G).

スクリーンショット:グループ化する様子。

Set the width of the newly grouped boxes to 100%. With this group still selected, adjust the alignment to "→" and overflow settings to "Hide."

![スクリーンショット:横幅、配置と方向、はみ出しの設定を調整する様子。](<a href="https://prod-files-secure.s3.us-west-2.amazonaws.com/7b9c8b1c-4d6b-44a1-a2de-d89537e6467f/611ca3f7-d8ff-4df6-ab87-29c06b48228b/tab-14.png" target="_blank" rel="nofollow noopener noreferrer">https://prod-files-secure.s3.us-west-2.amazonaws.com/7b9c8b1c-4d6b-44a1-a2de-d89537e6467f/611ca3f7-d8ff-4df6-ab87-29c06b48228b/tab-14.png</a>)  スクリーンショット:横幅、配置と方向、はみ出しの設定を調整する様子。

Finally, adjust the position of the heading text box using negative margins.

スクリーンショット:テキストボックスにネガティブマージンを設定する様子。

8. Live Preview

Use the live preview feature to test how your tab navigation looks and works.

Did this answer your question?