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

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

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.

2. Hide the Glide native nav-tab.

/*Hide all nav - tabbar*/
#page-root .has-tab-bar > div, #page-root [data-testid="menu-left-button"]:not(:has(div:first-child.visible-icon)), #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.

/*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.

/*Style main-menu*/
#page-root #main-root > div> .main-menu {
    position: sticky; /*Required for sticky at the top*/
    top: 0;
    background: rgb(97, 61, 199);
    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.

/*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.

/*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;
}
10 Likes

lovely @Himaladin :raised_hands:
thanks for this solution!

1 Like

You’re welcome, Sekayi.

1 Like