NavVerticalSubmenu
components/nav/VerticalSubmenu.vue
A NavVertical row that owns child rows: a parent NavVerticalItem (link, or a toggle button with no to/href) above a hairline-railed list of children in the sub treatment — italic, tighter rows, weight, size and row gap set by subWeight / subSize / subGap (med 13, 1px by default). The list opens whenever the current path is under `match` (defaults to `to`).
The list opens when the current path starts with match (defaults to to). This demo sits on /components/navigation/nav-vertical-submenu, so the here match below opens it; open overrides the route either way.
Scenarios
Empty — no children: no rail, plain row
Minimal — one child, route-matched
Typical — the qcontrol Inventory listings, parent page current
Unmatched — route elsewhere: collapsed to the parent row
Button form — no to: the row toggles the list
Controlled — v-model:open (open)
THE FLEET
Overflow — long labels, many children, small parent
THE FLEET
components/nav/VerticalSubmenu.vue
Usage
<NavVerticalSubmenu
to = "—"
href = "—"
target = "_self"
:active = "false"
size = "medium"
:match = "`to`"
:open = "open"
subWeight = "med"
:subSize = "13"
:subGap = "1"
>
Content here
</NavVerticalSubmenu>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| to | String | — | Parent row route — renders it as a link; also the default `match` |
| href | String | — | External parent link (used when no `to`) |
| target | String | '_self' | Anchor target for href |
| active | Boolean | false | Parent row highlight (caller-controlled, like NavVerticalItem) |
| size | String | 'medium' | Parent row size: 'medium' or 'small' |
| match | String | String[] | `to` | Path prefix(es) that open the list — segment-aware, so /inventory matches /inventory/models but not /inventory-archive |
| open | Boolean | undefined | Controlled override (v-model:open); wins over `match` |
| subWeight | String | 'med' | Children's font weight: 'reg' | 'med' | 'semi' | 'bold' | 'exbold' | 'black' |
| subSize | Number | 13 | Children's text size in px, on the type scale: 11–16 (off-scale falls back to 13) |
| subGap | Number | 1 | Provisional (c98): px of space between child rows, split into top/bottom padding. Expected to be removed once the value is dialed in |
Events
| Event | Description |
|---|---|
| update:open | The button form was clicked — the next open state |
Slots
| Slot | Description |
|---|---|
| label | Parent row label |
| default | Child NavVerticalItems (sub treatment by injection); none → no rail |