Floating Page Tab Menu | Feature Request

English Forum
1

Hi team,

It would be very helpful to enable configuration of the page tab menu so that it sticks or floats in position (and is always visible like the top system menu) as a user scrolls down the page. I’ve tried to figure out how to get a similar function to work with the group menu but no luck. Is there a way to configure the group menut to do this? If not, please consider adding this feature. Thanks!

2

Thanks for your feedback.
This feature is not currently supported. I have documented this requirement and will evaluate it in the future.

3

Wrong @hongboji ! This feature is supported now with a simple fix! Here’s how to make the tab menu ‘sticky,’ configure the tabs to display as buttons with color, and make it mobile responsive!

image
image1326×819 38.3 KB

image
image783×805 34.2 KB

  1. Go to theme editor → Others → Global Style
  2. Copy and paste the code below into the Global Style Box
  3. That’s it! Simple as can be!

/* ========== Page tabs: sticky + button style ========== */

/* — Flow / view pages (URL contains /view/) — */
.nb-subpages-slot-without-header-and-side .ant-tabs-top > .ant-tabs-nav {
position: sticky;
top: 0;
z-index: 10;
background: var(–colorBgContainer);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
padding: 8px 16px 4px;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-ink-bar {
display: none !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top > .ant-tabs-nav::before {
border-bottom: none !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab {
margin: 0 8px 8px 0 !important;
padding: 6px 16px !important;
border-radius: 6px !important;
background: rgba(0, 0, 0, 0.06) !important;
border: none !important;
transition: background 0.2s, color 0.2s;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab .ant-tabs-tab-btn {
color: rgba(0, 0, 0, 0.65) !important;
font-weight: 500;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab:hover {
background: rgba(0, 0, 0, 0.1) !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab-active {
background: var(–ant-color-primary, #1677ff) !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab-active .ant-tabs-tab-btn {
color: #fff !important;
}

/* — Classic schema pages (Page component + PageHeader) — */
.nb-page .pageHeaderCss .ant-tabs-nav {
position: sticky;
top: 0;
z-index: 10;
background: var(–colorBgContainer);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
padding: 8px 0 4px;
}

.nb-page .pageHeaderCss .ant-tabs-ink-bar {
display: none !important;
}

.nb-page .pageHeaderCss .ant-tabs-nav::before {
border-bottom: none !important;
}

.nb-page .pageHeaderCss .ant-tabs-tab {
margin: 0 8px 8px 0 !important;
padding: 6px 16px !important;
border-radius: 6px !important;
background: rgba(0, 0, 0, 0.06) !important;
border: none !important;
transition: background 0.2s, color 0.2s;
}

.nb-page .pageHeaderCss .ant-tabs-tab .ant-tabs-tab-btn {
color: rgba(0, 0, 0, 0.65) !important;
font-weight: 500;
}

.nb-page .pageHeaderCss .ant-tabs-tab:hover {
background: rgba(0, 0, 0, 0.1) !important;
}

.nb-page .pageHeaderCss .ant-tabs-tab-active {
background: var(–ant-color-primary, #1677ff) !important;
}

.nb-page .pageHeaderCss .ant-tabs-tab-active .ant-tabs-tab-btn {
color: #fff !important;
}

/* ========== Mobile: smaller tabs + wrap rows (Option H) ========== /
@media (max-width: 767px) {
/ Smaller tab buttons */
.nb-subpages-slot-without-header-and-side .ant-tabs-top > .ant-tabs-nav {
padding: 4px 8px 2px;
height: auto !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab {
margin: 0 4px 6px 0 !important;
padding: 4px 10px !important;
border-radius: 4px !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab .ant-tabs-tab-btn {
font-size: 12px !important;
line-height: 1.2;
white-space: nowrap;
}

.nb-page .pageHeaderCss .ant-tabs-nav {
padding: 4px 0 2px;
height: auto !important;
}

.nb-page .pageHeaderCss .ant-tabs-tab {
margin: 0 4px 6px 0 !important;
padding: 4px 10px !important;
border-radius: 4px !important;
}

.nb-page .pageHeaderCss .ant-tabs-tab .ant-tabs-tab-btn {
font-size: 12px !important;
line-height: 1.2;
white-space: nowrap;
}

/* Option H: wrap tabs — disable horizontal scroll mode */
.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-nav-wrap,
.nb-page .pageHeaderCss .ant-tabs-nav-wrap {
overflow: visible !important;
white-space: normal !important;
padding-right: 0 !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-nav-list,
.nb-page .pageHeaderCss .ant-tabs-nav-list {
flex-wrap: wrap !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
transition: none !important;
}

/* Hide scroll affordances from Option A–E if they were added earlier */
.nb-subpages-slot-without-header-and-side .ant-tabs-top > .ant-tabs-nav::after,
.nb-page .pageHeaderCss .ant-tabs-nav::after {
content: none !important;
display: none !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top::after,
.nb-page .pageHeaderCss .ant-tabs::after {
content: none !important;
display: none !important;
}

/* Keep “Add tab” / operations on the right when present */
.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-nav-operations,
.nb-page .pageHeaderCss .ant-tabs-nav-operations {
align-self: flex-start;
margin-top: 2px;
}
}

/* Extra small phones */
@media (max-width: 399px) {
.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab,
.nb-page .pageHeaderCss .ant-tabs-tab {
padding: 3px 8px !important;
}

.nb-subpages-slot-without-header-and-side .ant-tabs-top .ant-tabs-tab .ant-tabs-tab-btn,
.nb-page .pageHeaderCss .ant-tabs-tab .ant-tabs-tab-btn {
font-size: 11px !important;
}
}