# 🖱️ Create Your Own Custom Tab/Sub-tab Navigation

**URL:** <https://community.glideapps.com/t/create-your-own-custom-tab-sub-tab-navigation/76526>\
**Category:** Community Resources\
**Tags:** custom-css, tutorial, custom-code\
**Created:** [September 21, 2024, 10:00am UTC](https://community.glideapps.com/t/create-your-own-custom-tab-sub-tab-navigation/76526 "2024-09-21T10:00:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 21, 2024, 10:00am UTC](https://community.glideapps.com/t/create-your-own-custom-tab-sub-tab-navigation/76526/1 "2024-09-21T10:00:45Z")

</div>

What I’m sharing below uses an example of a button block component to replace native navigation and allows you to organize tabs to be placed within a specific main tab as sub-tabs.  
The following method is open to many possibilities for using components and styles beyond the example I provided, such as floating menus, involving rich text components, or custom components with your own style. Feel free to share your creative styles/designs in this thread to share with other community members.

![Screen-Recording-2024-09-21-at-1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/c/4ccc8da4ff70b4b28d35820ba1758d0d16ce1159.webp)

Here’s how you do it:

## 1. Prepare 3 button block components.

Assign the class name ‘ **main-menu** ’ to the main tab, ‘ **sub-menu** ’ and ‘ **sub-menu2** ’ to the 2 sub-menu button block components. Each button is already given the corresponding “Go to Tab” action.

 ![Screenshot 2024-09-21 at 15.47.27](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/78a7c8dbd41975b2390a93004927f0f9a04e88a7.png)

 ![Screenshot 2024-09-21 at 15.47.59](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/2/92f77ee8b9e95d571f6f20824e1fd4db90823bbd.png)

## 2. Hide the Glide native nav-tab.

```css
/*Hide all nav - tabbar*/
#page-root .has-tab-bar > div, #page-root [data-testid="menu-left-button"]:not(:has(div:first-child.visible-icon)), #page-root:not(:has(.mobile-layer)) #nav-root > div > div > div {
  display: none;
}

```

## 3. Copy the following CSS code so your main-menu can become active based on the selected tab.

```css
/*Custom main-menu 1*/
#page-root:has(nav ul > li:nth-child(1) > .menu-item.active) .main-menu button:nth-child(1) {
    background-color: var(--gv-w10A);   
}
/*Custom main-menu 2*/
#page-root:has(nav ul > li:nth-child(2) > .menu-item.active) .main-menu button:nth-child(2) {
    background-color: var(--gv-w10A);
}
/*Custom main-menu 3*/
#page-root:has(nav ul > li:nth-child(3) > .menu-item.active) .main-menu button:nth-child(3) {
    background-color: var(--gv-w10A);
}

/*Remove Button default style*/
#page-root .main-menu .bordered {
    background: transparent;
    box-shadow: none;
}

```

Add the following code to make the main menu sticky at the top and set buttons to nowrap.

```css
/*Style main-menu*/
#page-root #main-root > div> .main-menu {
    position: sticky; /*Required for sticky at the top*/
    top: 0;
    background-color: var(--gv-accent);
    padding: 8px;
    margin-top: -1rem;
    margin-bottom: 1rem;
    z-index: 99999;
}

/*Nowrap All Button*/
#page-root .main-menu .button-box, 
#page-root .sub-menu .button-box, 
#page-root .sub-menu2 .button-box {
    flex-wrap: nowrap;
}

```

## 4. CSS Code for sub-menu 1.

```css
/*Custom sub-menu 4-6*/
#page-root:has(nav ul > li:nth-child(4) > .menu-item.active) .sub-menu button:nth-child(1),
#page-root:has(nav ul > li:nth-child(5) > .menu-item.active) .sub-menu button:nth-child(2),
#page-root:has(nav ul > li:nth-child(6) > .menu-item.active) .sub-menu button:nth-child(3) {
    border-radius: 0;
    border-bottom: 2px solid red;
    background-color: rgba(255, 0, 0, 0.2);   
}

/* Keep main-menu 1 active while sub-tabs 4-6 are active */
#page-root:has(nav ul > li:nth-child(n + 4):nth-child(-n + 6) > .menu-item.active) .main-menu button:nth-child(1) {
    background-color: var(--gv-w10A);
}

/*Style Sub-menu 1*/
#page-root #main-root > div > .sub-menu {
    position: sticky;
    top: 55px;
    padding: 8px;
    margin-top: -1rem;
    margin-bottom: 1rem;
    background-color: #272727;
    z-index: 99999;
}

```

## 5. CSS Code for sub-menu 2.

Since sub-menu 2 is located within the “more” menu, the `:nth-child(n + 1)` of Glide’s tab increases by 1.

```css
/*Custom sub-menu 7-9 in Fly-out*/
#page-root:has(nav ul > li:nth-child(8) > .menu-item.active) .sub-menu2 button:nth-child(1),
#page-root:has(nav ul > li:nth-child(9) > .menu-item.active) .sub-menu2 button:nth-child(2),
#page-root:has(nav ul > li:nth-child(10) > .menu-item.active) .sub-menu2 button:nth-child(3) {
    border-radius: 0;
    border-bottom: 2px solid red;
    background-color: rgba(255, 0, 0, 0.2);    
}

/* Keep main-menu 2 active while sub-tabs 7-9 are active */
#page-root:has(nav ul > li:nth-child(n + 8):nth-child(-n + 10) > .menu-item.active) .main-menu button:nth-child(2) {
    background-color: var(--gv-w10A);
}

/*Style Sub-menu 2*/
#page-root #main-root > div> .sub-menu2 {
    position: sticky;
    top: 55px;
    padding: 8px;
    margin-top: -1rem;
    margin-bottom: 1rem;
    z-index: 99999;
    background-color: #272727;
}

```

---

<div class="post-metadata">

**Author:** ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)\
**Post date:** [September 21, 2024, 10:12am UTC](https://community.glideapps.com/t/create-your-own-custom-tab-sub-tab-navigation/76526/2 "2024-09-21T10:12:02Z")

</div>

lovely @Himaladin 🙌  
thanks for this solution!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [September 21, 2024, 10:16am UTC](https://community.glideapps.com/t/create-your-own-custom-tab-sub-tab-navigation/76526/3 "2024-09-21T10:16:57Z")

</div>

You’re welcome, Sekayi.