getgrav / getgrav/grav-plugin-admin

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

Open
#2,504 0 comments 0 reactions 1 assignee Claimed by @rhukster View on GitHub
enhancement
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.