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:

Did the information help you?

help.sitevision.se always refers to the latest version of Sitevision