Customised navigation menus

Contact

Volker Burggräf
Internet Coordinator

Customised navigation menus

On overview pages, it can be useful to use certain navigation menus in the page content itself in a suitable place. TYPO3 offers several types of menus, which are shown here using examples.

Your own navigation menus placed in the page content can supplement or replace the automatic navigation menus (sub-navigation menu and project navigation) that TYPO3 displays in the side column of the web pages.

Video of the training course on customised navigation menus

In an online training course on customised navigation menus, the various menu types offered by TYPO3 were presented and their possible uses compared using examples.

Note: The video is only available to members of the university.

  • Introduction: Automatic menus (subnavigation, project navigation) vs. manual menus (0'00")
  • Summaries (6'10")
  • Link list as buttons (10'12")
  • Categorised pages (16'50")
  • Subpages (20'36")
  • Subpages incl. page content (24'12")
  • Sitemap of the selected pages (28'10")
  • Menu of the selected pages (30'54")
  • Recently updated pages (33'16")
  • The section index - jump menu within pages (no longer recommended) (37'41")

Menu: Summaries

Lists subpages with title and summary (from the [Metadata] tab)

  • General: Formatting/arranging elements

    Content modules can be provided with frame lines or background colours and made expandable/collapsible for the purpose of delimitation or highlighting.
  • Furnishing logo
  • Text content

    Texts, lists, tables etc. can be integrated here - comparable to a Word document
  • Buttons

    Buttons are nothing more than visually "pimped" hyperlinks. Formatting a hyperlink as a button can make it more visible and easier to navigate - especially on smartphones.
  • Images with/without text

    A single image or several images can be integrated into web pages in TYPO3 from the media management and, if required, arranged above or next to each other with associated text. The option to assign captions and links as well as a click enlargement function is also included.
  • Picture galleries and sliders

    A series of images can be displayed as a gallery of small image thumbnails that open in a so-called lightbox window when clicked.
  • Videos and audios

    Media such as audio and videos can be integrated into the web pages - either as your own MP3 or MP4 files or directly from YouTube or Vimeo.
  • File downloads

    If files are to be offered for download, we recommend using the file links plugin. Suitable file icons or thumbnails can be displayed automatically.
  • Glossary (A - Z with own terms)

    A self-created, alphabetically sorted list of terms with explanations
  • Contact details

    Contact details of university members do not need to be entered manually and, if necessary, multiple times in websites. Instead, there is a TYPO3 plugin that conveniently reads the contact data, including course information, from Stud.IP so that it only needs to be maintained there.
  • Stud.IP Plugins
  • Calendar

    Enter calendar appointments (also as serial appointments) and display them on the website as a scrollable view, list view and detailed view. Past appointments are automatically hidden.
  • News (News module)
  • Maps / Addresses

    Display a dynamic map on the website and place markers with info pop-ups on it if required.
  • Live search in websites

    A real-time search can be generated for a list of keywords, dates, addresses, etc., which enables quick filtering for suitable entries via a search field.
  • Input forms

    Customisable input forms whose contents are sent to a specific email address when they are sent.
  • Customised navigation menus
  • Publication lists
  • Job advertisements

    This allows the job advertisements maintained by Division 1 to be embedded on a separate website.
  • Mathematical formulae

    Representation of mathematical formulae, e.g. with fractions, roots etc.
  • Stud.IP ZSKB content elements
  • Documentary on ex-post transparency

Menu: Categorised pages

Displays all pages that have one or more specific category(ies)

Menu: Subpages of the selected pages incl. page content

Lists the subpages and their internal navigation

Menu: Selected pages

A manually compiled menu from specific websites

Menu: Section index

Jump list to destinations within one or more pages

Important notes in advance

The section index (jump menu) is a rather old-fashioned tool in this form. If a page has a lot of content, so that a topic overview makes sense, you should consider working with drop-down elements instead. The drop-down buttons fulfil a similar function to a menu, but instead of jumping within the page, the desired content is opened directly at the current position - this approach is preferable.

The section index does not work correctly for elements that are located within grid elements (e.g. column constructs or nested drop-down elements)! The position of the entries in the jump list then does not correspond to the actual position within the web page.

These configurations have been made in the following example:

  • The element was assigned the CSS class indent has been assigned to the element. This indents the individual links according to their hierarchy (= heading type).
  • Another page was explicitly selected in the "Selected pages" field. This displays the jump menu for the content of the selected page, i.e. the links lead to the page and within it to the respective content element.

The same menus with the appearance "Link list as buttons"

Menu: Summaries

Lists subpages with title and summary (from the [Metadata] tab)

  • General: Formatting/arranging elements

    Content modules can be provided with frame lines or background colours and made expandable/collapsible for the purpose of delimitation or highlighting.
  • Furnishing logo
  • Text content

    Texts, lists, tables etc. can be integrated here - comparable to a Word document
  • Buttons

    Buttons are nothing more than visually "pimped" hyperlinks. Formatting a hyperlink as a button can make it more visible and easier to navigate - especially on smartphones.
  • Images with/without text

    A single image or several images can be integrated into web pages in TYPO3 from the media management and, if required, arranged above or next to each other with associated text. The option to assign captions and links as well as a click enlargement function is also included.
  • Picture galleries and sliders

    A series of images can be displayed as a gallery of small image thumbnails that open in a so-called lightbox window when clicked.
  • Videos and audios

    Media such as audio and videos can be integrated into the web pages - either as your own MP3 or MP4 files or directly from YouTube or Vimeo.
  • File downloads

    If files are to be offered for download, we recommend using the file links plugin. Suitable file icons or thumbnails can be displayed automatically.
  • Glossary (A - Z with own terms)

    A self-created, alphabetically sorted list of terms with explanations
  • Contact details

    Contact details of university members do not need to be entered manually and, if necessary, multiple times in websites. Instead, there is a TYPO3 plugin that conveniently reads the contact data, including course information, from Stud.IP so that it only needs to be maintained there.
  • Stud.IP Plugins
  • Calendar

    Enter calendar appointments (also as serial appointments) and display them on the website as a scrollable view, list view and detailed view. Past appointments are automatically hidden.
  • News (News module)
  • Maps / Addresses

    Display a dynamic map on the website and place markers with info pop-ups on it if required.
  • Live search in websites

    A real-time search can be generated for a list of keywords, dates, addresses, etc., which enables quick filtering for suitable entries via a search field.
  • Input forms

    Customisable input forms whose contents are sent to a specific email address when they are sent.
  • Customised navigation menus
  • Publication lists
  • Job advertisements

    This allows the job advertisements maintained by Division 1 to be embedded on a separate website.
  • Mathematical formulae

    Representation of mathematical formulae, e.g. with fractions, roots etc.
  • Stud.IP ZSKB content elements
  • Documentary on ex-post transparency

Menu: Categorised pages

Displays all pages that have one or more specific category(ies)

Menu: Subpages of the selected pages incl. page content

Lists the subpages and their internal navigation

Menu: Selected pages

A manually compiled menu from specific websites

Menu: Section index

Jump list to destinations within one or more pages

Important notes in advance

The section index (jump menu) is a rather old-fashioned tool in this form. If a page has a lot of content, so that a topic overview makes sense, you should consider working with drop-down elements instead. The drop-down buttons fulfil a similar function to a menu, but instead of jumping within the page, the desired content is opened directly at the current position - this approach is preferable.

The section index does not work correctly for elements that are located within grid elements (e.g. column constructs or nested drop-down elements)! The position of the entries in the jump list then does not correspond to the actual position within the web page.

These configurations have been made in the following example:

  • The element was assigned the CSS class indent has been assigned to the element. This indents the individual links according to their hierarchy (= heading type).
  • Another page was explicitly selected in the "Selected pages" field. This displays the jump menu for the content of the selected page, i.e. the links lead to the page and within it to the respective content element.
Internetkoordinator (Changed: 11 Feb 2026)  |  Kurz-URL:Shortlink: https://uol.de/p88817en
Zum Seitananfang scrollen Scroll to the top of the page

This page contains automatically translated content.