import { Meta } from '@storybook/blocks';

<Meta title="Molecules/Menus" />

# Menus

Many of the menu components generated here, will not be styled very well out of
the box, this is because they are usually styled in context of the region (or
wrapper) they are in. Probably not very component-minded, but it is often the
most practical way to style a menu without having to do a lot of overrides.

## Menus blocks

2 parameters are absolutely needed:
- 'menu': the name of the menu you to display (e.g. 'main', 'secondary' or
'account'), this is used to build the BEM classes.
- 'region': context for where the menu is rendered (so in what Organism it
shows up). Also used to render the correct twig in the Styleguide components.

Depending on the region where it is rendered (header, one of the doormat
regions, footer primary, …), a different twig template is used for a menu block.
By default, navigation will use the `menus/menu/_menu-block.twig` template,
which outputs a `<nav>` tag.\
However, menus rendered in the doormat or primary footer, will render using an
altered block template from `molecules/footer/doormat` and
`molecules/footer/primary`.
It is the same as the default block template, except the headings are H4 instead
of H2. These are wrapped in `<div>` tags.

## Language

The language menu comes in 2 flavors: a dropdown list, or inline elements.\
By default, it is a dropdown.

The way to switch this in Drupal, is to go to your theme's theme settings page
and (un)check the 'dropdown' checkbox.

In Rocketship, you'll probably see the language navigation is rendered twice:
once in the 'nav' wrappers, and once in the 'top header'.\
This is to give you the option of showing it one place on mobile and another
place on wider screens.
You just have to show/hide the correct one based on css breakpoints.
You can find the css to do this in `components/00-theme/02-molecules/menus/menu--language/_menu--language.scss`\
Just look for `&.js-open {`

## Tabs

...
