Mobil menu

With the Mobile Menu module, you get a menu adapted for the mobile phone. Put the mobile menu in the basic template and set it to only appear in the mobile/small screen breakpoint. The module contains both the hamburger menu and the menu.

Settings

General

In the mobile menu, you can make a few different settings. On the one hand, you can decide how many levels it should show and you can make settings for where the menu should start from.

Starting point

Top level

Select this if you want the menu to always start from the top level.

Current page

Current page means that the menu will start on the page the visitor is on.

Sub tree

Select this if you want the menu to always start from the selected sub-branch.

From metadata

Using the link metadata type, you can point out where in the structure the menu should start. This allows you to use the same menu module to display different content in the menu depending on where you are in the structure.

If you choose this option, you can specify which metadata to use as a starting point.

From closest group page or metadata

Select this if you want the menu to always start from the sub-branch that is selected.

Custom starting point

Selecting Custom starting point allows you to specify a specific page in the structure where the menu should start.

If you choose this option, you can specify which metadata to use as a starting point.

The menu will always show the same content, no matter where in the structure you are. A fixed starting point can be useful for example for a top menu where the content to be displayed should always be the same.

Button options

Show text and/or icon in the button

Here you can choose whether you want text, icon, or both in the mobile menu button.

• Only icon
• Text with icon after
• Text with icon before
• Text with icon above
• Text only

Type

Here you can choose one of the following:

• Button
• Ghost button
• Link button
• Text link
  

Color

If you have selected Ghost button or Button, you can choose the following under Color:

• Default - takes the Default Background Colorfrom Element Colors in the theme
• Profile color - takes the Profile color from the theme
• Primary - takes the Primary color from Block colors in the theme
• Secondary - takes the Secondary color from Block colors in the theme

Button size

You can choose the following button sizes:

• Large
• Normal
• Small
• Slim

Menu settings

Menu style

Here you can choose how the menu should be displayed:

• Centered
• Left
• Right

Background color

If you choose background color, you can choose from the following colors from the theme set on the page:

• Basic
• Standard block
• Primary block
• Secondary block

Text color

Here you can choose whether you want regular text color or link color in the mobile menu.

• Regular text color
• Link color

Other tips about the Mobile Menu

Accessibility

The name of the module is used as an aria label which is used by, for example, screen readers to identify the content. It is advisable to name the module in a way that assistive technologies understand what the module displays. There should not be multiple menu modules with the same name on the page.