Components, navigation

`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.

`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.

`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.

`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.

The first item carries no URL, which is how the template is told to treat it as the title of the menu rather than as a link: it gets the `menu-title` class and renders as a span.

The same menu with `collapsible` set to closed, which is the state the summary rows have to be legible in on their own.

A menu whose parents open on load. An item with children is a `details` element rather than a link with a script behind it, so the whole thing works with no JavaScript and the open state is the element's own. Note that the component only renders anything while `collapsible` is set -- the non-collapsible branch of the template is an empty macro.

What a parent item of the primary nav opens into: the body of the menu link's own content field, then its children. `content` is the formatted text field the parent carries, and `item` is the menu link -- only `item.below` is read from it. The component is included by `primary_nav` and is not placed on its own.

The list items of a sub menu, nested to two levels. The component prints `li` elements and no list around them -- the `ul` belongs to whoever includes it, which is `primary_nav_content` for the first level and this component itself for every level under that.

The component is a wrapper and nothing else -- it prints its slot inside a div and adds no markup of its own -- so what is worth looking at is what goes in it. Here that is the two lists core's local tasks render as, with the classes `libraries/global/component/tabs.css` styles. The site itself puts those lists in a `nav.tabs` from block--local-tasks-block.html.twig rather than in this component, so the row spacing set on `nav.tabs` is not part of this preview.