# Tab Menu

**URL:** <https://community.hubspot.com/t/tab-menu/8394>\
**Category:** CMS Development\
**Created:** [April 4, 2018, 10:40pm UTC](https://community.hubspot.com/t/tab-menu/8394 "2018-04-04T22:40:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mboyer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mboyer/32/22074_2.png) [@Mboyer](https://community.hubspot.com/u/Mboyer)\
**Post date:** [April 4, 2018, 10:40pm UTC](https://community.hubspot.com/t/tab-menu/8394/1 "2018-04-04T22:40:50Z")

</div>

Does anyone know if these tab objects can be done in Hubspot

 ![Tabs for a menu.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/9/b99860620d078f58c3eef3f0a4fa75a184eb7450.png)  
Tab Object

---

<div class="post-metadata">

**Author:** ![AJLaPorte\_diagr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ajlaporte_diagr/32/24548_2.png) [@AJLaPorte\_diagr](https://community.hubspot.com/u/AJLaPorte_diagr)\
**Post date:** [April 5, 2018, 3:05pm UTC](https://community.hubspot.com/t/tab-menu/8394/2 "2018-04-05T15:05:36Z")

</div>

These types of tabbed interfaces can be created in HubSot. While there is not a native module for tabbed content, you can create a custom module to accomplish this. If you’re using the new design manager (currently in beta) you can create a more efficient custom module with this using repeater fields.

You can create tabs like this using either a JS plugin already out there or with CSS only ([Functional CSS Tabs Revisited | CSS-Tricks](https://css-tricks.com/functional-css-tabs-revisited/)).

---

<div class="post-metadata">

**Author:** ![Mboyer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mboyer/32/22074_2.png) [@Mboyer](https://community.hubspot.com/u/Mboyer)\
**Post date:** [April 5, 2018, 4:43pm UTC](https://community.hubspot.com/t/tab-menu/8394/3 "2018-04-05T16:43:34Z")

</div>

Thanks AJ. Lets pretend I am not a web designer. so to use the script on the reference page, I would add say a flex column and paste the text into the CSS Declarations??

give me a bit more and i think I can do this

---

<div class="post-metadata">

**Author:** ![AJLaPorte\_diagr](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ajlaporte_diagr/32/24548_2.png) [@AJLaPorte\_diagr](https://community.hubspot.com/u/AJLaPorte_diagr)\
**Post date:** [April 5, 2018, 4:51pm UTC](https://community.hubspot.com/t/tab-menu/8394/4 "2018-04-05T16:51:34Z")

</div>

Ideally, yes. You should be able to copy the HTML from the **HTML Structure** portion ([Functional CSS Tabs Revisited | CSS-Tricks](https://css-tricks.com/functional-css-tabs-revisited/#article-header-id-1)) and paste that into an HTML Module (or into the view source view of the Rich Text editor. This is found by clicking the **\</\>** button on the menubar). Then you should be able to copy the CSS from the **CSS Layout** potrion ([Functional CSS Tabs Revisited | CSS-Tricks](https://css-tricks.com/functional-css-tabs-revisited/#article-header-id-2)) and then you should see similar to what they have in their demo here: [Pure CSS Tabbed Areas](https://css-tricks.com/examples/CSSTabs/radio.php)

You may need to tweak your CSS a bit as the CSS they use for this:

```auto
[type=radio]:checked ~ label {
 background: white;
 border-bottom: 1px solid white;
 z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
 z-index: 1;
}

```

is targeting all radio buttons so it could conflict with existing forms that have radio buttons.

Likewise, if you are using classes on elements with the same name as those in their CSS this could also cause conflicting issues.

I hope this helps to clarify this a bit for you.

-AJ

---

<div class="post-metadata">

**Author:** ![Mboyer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mboyer/32/22074_2.png) [@Mboyer](https://community.hubspot.com/u/Mboyer)\
**Post date:** [April 5, 2018, 6:56pm UTC](https://community.hubspot.com/t/tab-menu/8394/5 "2018-04-05T18:56:43Z")

</div>

Ok AJ, youre going to think I am air headed but see Below. is this the right location to put the scripts or am I missing something??

 ![Flexible Column.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/2/121a8182c78ddb2afeacc3ec7cce53a55ad04c7d.png)

 ![CSS in Flexible Column.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/d/6de9b463dab4f884aaa6422b04ecba0256faf3d1.png)