Docs

Menu

Use the menu content block to render a grid of level 1 and level 2 menu items.
Overview   Grid Layout   Masonry Layout   Menu Data   Arguments   Background Type   Heading Type  

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.

Menu 1 Menu 1
Item 1.1 Item 1.1
Item 1.2 Item 1.2
Item 1.3 Item 1.3
Item 1.4 Item 1.4
Item 1.5 Item 1.5
Menu 2 Menu 2
Item 2.1 Item 2.1
Item 2.2 Item 2.2
Menu 3 Menu 3
Item 3.1 Item 3.1
Item 3.2 Item 3.2
Item 3.3 Item 3.3
Item 3.4 Item 3.4
Menu 4 Menu 4
Item 4.1 Item 4.1
Item 4.2 Item 4.2
Item 4.3 Item 4.3
Item 4.4 Item 4.4
Menu 5 Menu 5
Item 5.1 Item 5.1
Item 5.2 Item 5.2
Menu 6 Menu 6
Item 6.1 Item 6.1
Item 6.2 Item 6.2
Item 6.3 Item 6.3
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.

Menu 1 Menu 1
Item 1.1 Item 1.1
Item 1.2 Item 1.2
Item 1.3 Item 1.3
Item 1.4 Item 1.4
Item 1.5 Item 1.5
Menu 2 Menu 2
Item 2.1 Item 2.1
Item 2.2 Item 2.2
Menu 3 Menu 3
Item 3.1 Item 3.1
Item 3.2 Item 3.2
Item 3.3 Item 3.3
Item 3.4 Item 3.4
Menu 4 Menu 4
Item 4.1 Item 4.1
Item 4.2 Item 4.2
Item 4.3 Item 4.3
Item 4.4 Item 4.4
Menu 5 Menu 5
Item 5.1 Item 5.1
Item 5.2 Item 5.2
Menu 6 Menu 6
Item 6.1 Item 6.1
Item 6.2 Item 6.2
Item 6.3 Item 6.3
yml 
  - _bookshop_name: menu
    menu: services
    menu-style: masonry
    icon-rounded: true
    icon-style: fa-1x

The menu block uses regular Hugo menu data  as input. Use the menu property to assign a specific menu configuration. The panel below shows the (abbreviated) example data used on this page.

[[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 Comment
_bookshop_name string Alias for _bookshop_name.
_ordinal int Zero-based position of the bookshop component within the page’s component hierarchy.
background background, string Background style of the section.
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 true 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.
id string Unique identifier of the current element.
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].
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.
Name Type Required Default
_bookshop_name string
Alias for _bookshop_name.
_ordinal int
Zero-based position of the bookshop component within the page’s component hierarchy.
background background, string
Background style of the section.
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 true
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.
id string
Unique identifier of the current element.
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].
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.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool Apply subtle theme colors.
Name Type Required Default
backdrop string
Background image with a mask to improve contrast.
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool
Apply subtle theme colors.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML Section content displayed below the title.
preheading string Preheading of the section heading.
size int 4 Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Name Type Required Default
align select start
Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML
Section content displayed below the title.
preheading string
Preheading of the section heading.
size int 4
Display size of the headline.
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container.
On this page