Menus

Menus

Split buttons

A button that does one thing and offers the others: its body does the action, the caret stuck to its end — and only the caret — opens the menu. `button_menu` given an `action` — `{ href }`, or `{ type: 'submit' }` in a form; the vue one emits `action`.

Separators

A separator is an item like the others, with one key more: a bare line parts two runs of items that have nothing to do with each other, and the same line given a word becomes the heading of what follows. Both sides of the stack read the same declaration — the third menu here is the vue one.

Counts

How many of whatever the item leads to, at the far end of the line. It is a pill and nothing else — pass `count` beside the label, in a dropdown item or a vertical menu item, and the item places it. An item without the key shows nothing.

What an item can be

Four kinds share one row: a word and a target is a link, a word and a state is a toggle, a word and children is a branch, and a bare line is a separator. Nothing declares its kind — it follows from what the item carries. A toggle spends its leading slot on its mark, so a column of them keeps its words aligned, and the panel stays open under it: a menu of filters is read by the handful, not one at a time.

Menu buttons

Vue

The link row and the separator as vue partials. Unlike the rows that read a route, these two take their icon and label as options, so nothing of the server is missing.