getgrav / getgrav/grav-plugin-admin
[Feature Request / UX] Add native support for vertical side-tab navigation in blueprint forms
- Dominant language
- PHP
- Stars
- 377
- Forks
- 225
- Avg merge
- 11h 51m
- Merged PRs (30d)
- 4
Description
**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)
Contributor guide
Assessment
This issue has not been assessed yet.