Teaser menu
The Teaser menu module allows you to place the module in the template to make it accessible on all pages of the website.

The following settings can be made in the puff menu:
Starting point
Here you set where the Teaser menu should start from.

- Current page - means that the menu will start on the page the visitor is on.
- 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.
- Custom starting point - Selecting Custom start point allows you to designate a specific page in the structure where the menu should start. Click on the drop-down list that appears when you select the option to point to a page, folder or archive. The menu will always show the same content, no matter where you are in the structure. A fixed starting point can be useful for example for a top menu where the content to be displayed should always be the same.
Content
The Teaser menu can be displayed in three different ways.

- No description - displays only the title in the puff.
- Fetch description from metadata - displays header and text from metadata in the puff. Select which metadata you want to retrieve from (usually preamble) and max number of words in description.
- List subpages - displays header and names of underlying pages in the puff. You choose how many subpages you want to show and whether they should be linked separately.

Example No description

Example Description from metadata

Example of a List menu – with subpages. Pages that only have a heading do not have any subpages.
List appearance

Max number of columns (2-6)
Here you choose the maximum number of columns.
Minimum width for column (px)
Here you can set the minimum width of a column. Default value is 224px.
Gap between items
Here you can choose different gaps between the puffs. Ranging from none to the largest distance XX Large. The following distances can be selected:
- None
- XXX Small
- XX Small
- X Small
- Small X
- Medium
- Large
- X Large
- XX Large
Heading text appearance

The puff menu retrieves the header text appearance from the theme. You can choose from the following header styles:
- Themed-controlled UI subheading
- Themed-controlled UI section header
- Themed-controlled UI heading
Icon settings
Show icon
Here you can choose to designate your own icons for the puffs. You do this using metadata of type link.
Metadata for icon
Here you select the link metadata that you intend to use for this purpose.
Position
You can choose different placements of the icon:
- Top left
- Top center
- Left of heading
Link appearance
Color
Here you can choose from the colors that are set up on the site.
Shadow
Here you can choose different variants of shading. Everything from None to the largest distance Large. The following distances can be selected:
- None
- Small
- Medium
- Large
Border radius
Here you can choose different rounding of the puffs. Everything from None to the largest distance Large. You can choose the following distances:
- None
- Small
- Medium
- Large
Padding
Here you can choose different inner distances in the puffs. Ranging from none to the largest distance XX Large. The following distances can be selected:
- None
- XXX Small
- XX Small
- X Small
- Small X
- Medium
- Large
- X Large
- XX Large
Arrow settings

Arrow type
Here you select the type of arrow.
- No arrow
- Thin arrow
- Filled arrow
- Filled angle
Position
Here you choose the location
- Bottom right corner
- Top right corner
- Directly after heading text
Arrow size relative to heading text
- X Small
- Small
- Medium
- Large
Accessibility
Highest heading level
To enable you to have correct heading levels in the module, we have added an h2 as the default heading level. Here you can change this to suit your design and get the right heading level. It is possible to change everything from h1-h6 to be able to match the correct heading level in the puff menu.

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.
This is a module from Sitevision Marketplace. To download it, go via the menu in the navigator -> Marketplace in the edit mode of your website.
The page published:
help.sitevision.se always refers to the latest version of Sitevision
Print page