Components, navigation

Every story of every component under `mantra_starter/components/navigation`: the menu and its links, the wrapper the menu blocks are placed in, the primary navigation with its collapsible parents, the responsive menu and its toggle, and the tabs. Navigation is the part of the theme with the most components that only make sense beside each other -- a menu link inside a menu inside a responsive menu -- so this is the page to read the nesting on. The primary navigation opens its parents with `details` and `summary` rather than with a script, so the open and closed stories are both the real thing with no JavaScript running. Each block is a `*.story.yml` committed beside its component, and nothing is saved.

Menu Wrapper

mantra_starter:menu_wrapper

Default

Three wrapped items. The wrapper contributes nothing but the element the items sit in -- everything a link carries with it is the item's own.

Menu Wrapper Item

mantra_starter:menu_wrapper_item

Default

One item with a sub menu under it. `link_title` and `link_url` are declared on the component but the template does not print them: the link belongs to whatever is placed in the content slot, and the two props are there for a caller that needs to know where the item points without rendering it.

Without a sub menu

A leaf item. The sub menu slot is empty, so nothing is printed for it.

Primary Nav

mantra_starter:primary_nav

With a menu title

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.

Open by default

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.

Closed by default

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

Primary nav content

mantra_starter:primary_nav_content

Default

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.

Frames, wheels and the parts that hold them together.

Primary nav links

mantra_starter:primary_nav_links

Default

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.

Responsive menu

mantra_starter:responsive_menu

Default

Responsive menu toggle

mantra_starter:responsive_menu_toggle

Default

Tabs

mantra_starter:tabs

Default

Tab 1#tab-1Tab 2#tab-2Tab 3#tab-3

Local tasks

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.

Primary tabs

Secondary tabs