Skip to content

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

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)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions