Menu
ID: mantra_starter:menu
A menu list. Rendered for every Drupal menu through the theme's menu.html.twig override, and callable directly from another component.
Status: experimental
| Name | Label | Type | Description |
|---|---|---|---|
menu_name
|
Menu name | String | |
menu_level
|
Menu level | Number | Nesting depth. The root list is 0 and only it takes attributes. |
items
|
Items | Unknown | ⚠️ {"type":"object"} |
direction
|
Direction | Enum | Which way the menu runs, and with it how a sub menu is disclosed -- one choice rather than two, because each way of running only has one sensible answer to the other question. `horizontal` is the default and lays the items out in a row that wraps, as a menu bar; each sub menu is a flyout, hidden behind an expand button and drawn over the page, positioned by Floating UI in menu.js -- a row has nowhere in flow to put a sub menu. `vertical` stacks them; each sub menu is open and inline, indented under the item it belongs to, so a vertical menu needs no JavaScript to be usable and can be read whole. It applies to every list in the menu, so a sub menu runs the same way its parent list does -- except a flyout, which stacks whatever the direction, being a panel rather than a continuation of the list it came from. Default: "vertical" Allowed values: horizontal, vertical |
collapsible
|
Collapsible | Boolean | Vertical menus only. Leaves the sub menu in flow and indented where `vertical` puts it, but hidden behind an expand button until it is opened -- an accordion, for a sidebar menu too long to show whole. Ignored on a horizontal menu, whose sub menus are already disclosed, as flyouts. Default: false |
link_font_size
|
Link font size | Enum | Size of the menu links, from the theme's type scale, applied to every level. `inherit` is the default and leaves them at whatever size the menu sits in, which is what a menu placed by a block wants; the named sizes are for a component that places a menu itself and needs it to sit against the type around it -- a footer menu below body copy, a banner menu above it. Default: "inherit" Allowed values: inherit, xs, sm, base, lg, xl |
Default
Link font size
`link_font_size: sm`. The size the links are set at, off the theme's type scale -- `xs`, `sm`, `base`, `lg`, `xl` -- applied to every level of the menu at once. The default, `inherit`, renders no class at all and leaves the links at whatever size the menu is placed in, which is what a menu placed by a block wants; a size is named here by a component that places a menu itself and needs it to sit against the type around it. Line height comes with the size: these rows are stacked or wrapped, so a font size changed on its own would leave them spaced for the one before it. The expand button does not follow -- it is sized in spacing units, not in `em`, so it stays the same at every setting.
Collapsible, vertical
`direction: vertical`, `collapsible: true`. The stack above, with each sub menu left where the indent puts it but hidden behind an expand button until it is opened -- an accordion, since a sub menu opening in flow pushes the items below it down rather than growing a row. What a long sidebar menu wants: only the branch being looked at is on the page. `collapsible` is a vertical option only. A horizontal menu discloses its sub menus already, as flyouts, and `mantra_starter:menu` discards the prop there. The width is held to a sidebar's: a vertical menu is a menu for a column, and its items are as wide as the column it is in.
Horizontal
`direction: horizontal` -- the default. A menu bar, and with it the flyout: a row that wraps has nowhere in flow to put a sub menu, so each one leaves the flow and is drawn over the page, the first level below its parent item and the third level beside its own. Every item with children carries the expand button; a flyout also opens on :hover and :focus-within, so it works before menu.js runs. menu.js hands whatever is open to Floating UI, which flips and shifts it away from the viewport edge: narrow the window until there is no room to the right of `Menu link 3` and its third level opens back over the second rather than off the page.
Vertical
`direction: vertical`. A stack, and with it the indent: a sub menu is a block of its own in flow, so it has somewhere to be indented to -- it takes `padding-left` and the third level takes it twice over. Nothing is disclosed and no button is rendered, so the whole tree is on the page and the menu needs no JavaScript to be usable. A sitemap or a footer menu. The width is held to a sidebar's: a vertical menu is a menu for a column, and its items are as wide as the column it is in.