Skip to content

[Feature Request / UX] Add native support for vertical side-tab navigation in blueprint forms #2504

@olygoelements

Description

@olygoelements

Description :
When a blueprint has many tabs (10+), the horizontal tab bar overflows and becomes unusable — tabs wrap or get cut off.

Proposed solution :
Add a CSS class side-tabs (already partially defined in template.css) to the .form-tabs wrapper when the tab count exceeds a configurable threshold, switching to a vertical left-side navigation.

Current state :
The class .form-tabs.side-tabs already exists in css-compiled/template.css with a basic flex layout, but it is never automatically applied based on tab count, and its styles are incomplete for a usable vertical nav.

Workaround currently used :
Injecting CSS via whitelabel.custom_css in user/localhost/config/plugins/admin.yaml :

css
.form-tabs { display: flex !important; align-items: flex-start !important; height: calc(100vh - 180px) !important; }
.admin-pages .form-tabs .tabs-nav { margin-right: 0 !important; }
.form-tabs .tabs-nav a { min-height: 0 !important; flex: none !important; }
.form-tabs > .tabs-nav {
  flex-direction: column !important;
  flex: 0 0 180px !important;
  height: 100% !important;
  overflow-y: auto !important;
  border-right: 2px solid rgba(0,0,0,0.10) !important;
  background: transparent !important;
}
.form-tabs > .tabs-nav a.tab__link {
  display: flex !important;
  justify-content: flex-end !important;
  text-align: right !important;
  min-height: 4vh !important;
  font-size: clamp(0.72rem, 1.1vw, 0.88rem) !important;
  border-left: 3px solid transparent !important;
  border-bottom: none !important;
}
.form-tabs > .tabs-nav a.tab__link.active {
  border-left-color: var(--color-a) !important;
  font-weight: 600 !important;
}
.form-tabs > .tabs-content { flex: 1 !important; height: 100% !important; overflow-y: auto !important; }

Request :
Either expose a blueprint-level option like tabs_layout: vertical or auto-apply .side-tabs when tab count > N (e.g. 6), and complete the existing .side-tabs CSS to cover scroll, sticky nav, and proportional sizing.

Grav Admin version : tested on current
Context : Blueprint with 10+ tabs (content, lineup, links, videos, discography, photos, press, pro docs, SEO, security)

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions