# Menu

Use the menu content block to render a grid of level 1 and level 2 menu items.

## Overview

The `menu` content block renders a grid of level 1 and level 2 menu items.

### Grid layout

Set `menu-style` to `grid` to render a responsive menu as a grid.

```yml
  - _bookshop_name: menu
    menu: services
    menu_style: grid
    icon_rounded: true
    icon_style: fa-1x
```

### Masonry layout

Set `menu-style` to `masonry` to render a responsive menu using masonry style.

```yml
  - _bookshop_name: menu
    menu: services
    menu_style: masonry
    icon_rounded: true
    icon_style: fa-1x
```

## Menu data

The menu block uses regular [Hugo menu data](https://gohugo.io/methods/site/menus/) as input. Use the `menu` property to assign a specific menu configuration. The panel below shows the (abbreviated) example data used on this page.

```toml
[[menus.services]]
  name = "Menu 1"
  pageRef = "#!"
  weight = 10
  [[menus.services.params]]
    icon = "fas 1"

[[menus.services]]
  name = "Item 1.1"
  parent = "Menu 1"
  pageRef = "#!"
  weight = 10

[[menus.services]]
  name = "Item 1.2"
  parent = "Menu 1"
  pageRef = "#!"
  weight = 20

[[menus.services]]
  name = "Item 1.3"
  parent = "Menu 1"
  pageRef = "#!"
  weight = 30
```

## Arguments

The content block supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `background` | background |  |  | Background style of the section. |
| `bg-class` | string |  |  | Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element. |
| `class` | string |  |  | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. |
| `cols` | int |  | `3` | Number of grid columns. |
| `cover` | bool |  |  | Flag indicating if the element should be rendered fullscreen. |
| `fluid` | bool |  | `true` | Flag to set the section container to fluid design, else the section is limited to `xxl`. |
| `heading` | heading |  |  | Heading of the content block, including a preheading and content element. |
| `icon-rounded` | bool |  |  | Stack the icon in a round container. |
| `icon-style` | string |  |  | Icon style. |
| `justify` | select |  | `start` | Justification of the child elements. Supported values: [`start`, `end`, `center`, `between`, `around`, `evenly`]. |
| `menu` | string |  | `main` | Name of the site menu. |
| `menu-style` | select |  | `masonry` | Style of the menu layout. Supported values: [`grid`, `masonry`]. |
| `overlay-mode` | select |  |  | Overlay mode of the element, overrides the site's general configuration. Supported values: [`light`, `dark`, `none`]. |
| `section-class` | string |  |  | Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element. |
| `theme` | select |  |  | Color theme to apply to the element. Supported values: [`light`, `dark`]. |
| `width` | int |  | `8` | Column width of the element. For embedded elements, the width is relative to the parent's container. |
| `wrapper` | string |  |  | Class attribute of the element's wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the `fa-wrapper` and `fa-fluid` attributes by default. |