Menu List
How to use the Menu List block in the Meditative Folks Theme.
Menu List
At a glance
Renders a titled navigation list. You can show only top-level links, use dropdowns for nested items, or collapse the list under the title on mobile.
Used in
- Header (via theme blocks)
- Footer (via theme blocks)
Settings
Menu settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Title | Heading shown above the menu links. On mobile accordion, this heading is the trigger. | — | Always |
| Menu | The navigation menu to display. | — | Always |
| Show nested links | When off, only top-level menu links are shown. When on, items with children use expandable dropdowns (tablet/desktop flyouts where applicable). | No | Always |
| Show menu as accordion on mobile | Collapses the link list under the title on small screens. Only top-level links are shown in the accordion. | No | Always |
Layout settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Menu direction | Stacks links in a column or places them in a row. | column | Always |
| Gap between links | Space between menu links, in pixels. | 8 | Always |
Title Font settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use global H3 font settings | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Always |
| Use global font family | When enabled, menu titles follow the global headingfont family. | Yes | Always |
| Font family | Controls “Font family” on the storefront. Open the theme editor to preview live. | inter_n6 | use global font family is off |
| Title font size (mobile) | Sets title font size (mobile) in pixels for the matching screen size. | 24 | use global h3 font settings is off |
| Title font size (tablet) | Sets title font size (tablet) in pixels for the matching screen size. | 26 | use global h3 font settings is off |
| Title font size (desktop) | Sets title font size (desktop) in pixels for the matching screen size. | 28 | use global h3 font settings is off |
| Title font weight | Sets how bold title text appears. | 700 | use global h3 font settings is off |
Submenu font settings
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Use global body font settings | When on, uses the matching style from Theme settings. Turn off to style only this section or block. | Yes | Always |
| Submenu link font size (mobile) | Sets submenu link font size (mobile) in pixels for the matching screen size. | 14 | use global paragraph font settings is off |
| Submenu link font size (tablet) | Sets submenu link font size (tablet) in pixels for the matching screen size. | 15 | use global paragraph font settings is off |
| Submenu link font size (desktop) | Sets submenu link font size (desktop) in pixels for the matching screen size. | 16 | use global paragraph font settings is off |
| Submenu link font weight | Sets how bold submenu link text appears. | 500 | use global paragraph font settings is off |
Accent color of color scheme is used to change the color of hover state of submenu links.
Setting details
Each control from the tables above, explained simply:
Title
Controls “Title” on the storefront. Open the theme editor to preview live. Default: —.
Menu
Controls “Menu” on the storefront. Open the theme editor to preview live. Default: —.
Show nested links
When off, only top-level menu links are shown. When on, items with children use expandable dropdowns (tablet/desktop flyouts where applicable). Default: No.
Show menu as accordion on mobile
Collapses the link list under the title on small screens. Only top-level links are shown in the accordion. Default: No.
Menu direction
Controls “Menu direction” on the storefront. Open the theme editor to preview live. Default: column.
Gap between links
Controls “Gap between links” on the storefront. Open the theme editor to preview live. Default: 8.
Use global H3 font settings
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes.
Use global font family
When enabled, menu titles follow the global headingfont family. Default: Yes.
Font family
Controls “Font family” on the storefront. Open the theme editor to preview live. Default: inter_n6. This control appears when: use global font family is off.
Title font size (mobile)
Sets title font size (mobile) in pixels for the matching screen size. Default: 24. This control appears when: use global h3 font settings is off.
Title font size (tablet)
Sets title font size (tablet) in pixels for the matching screen size. Default: 26. This control appears when: use global h3 font settings is off.
Title font size (desktop)
Sets title font size (desktop) in pixels for the matching screen size. Default: 28. This control appears when: use global h3 font settings is off.
Title font weight
Sets how bold title text appears. Default: 700. This control appears when: use global h3 font settings is off.
Use global body font settings
When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes.
Submenu link font size (mobile)
Sets submenu link font size (mobile) in pixels for the matching screen size. Default: 14. This control appears when: use global paragraph font settings is off.
Submenu link font size (tablet)
Sets submenu link font size (tablet) in pixels for the matching screen size. Default: 15. This control appears when: use global paragraph font settings is off.
Submenu link font size (desktop)
Sets submenu link font size (desktop) in pixels for the matching screen size. Default: 16. This control appears when: use global paragraph font settings is off.
Submenu link font weight
Sets how bold submenu link text appears. Default: 500. This control appears when: use global paragraph font settings is off.
Tips
- Add a title if you want the mobile accordion. Without a title, the list stays open on all screen sizes.
- Place this block inside a wrapper if it should only show on certain screen sizes.
- Preview in the theme editor on mobile and desktop.