Page structure

Each page of a website consists of specific basic elements.

Skip to content

Instructions on how to use the elements presented here can be found in the LMU-internal WCMS wiki in Bayerncollab (Confluence).

Header

© LMU Referat VI.5 Internetdienste

The header contains key elements such as the LMU logo and the website title. It also includes important navigation elements such as the hamburger menu, the breadcrumb menu, and quick links/deep links. On larger screens, an option to switch languages is also displayed here.

The header features...

  • A concise headline and a teaser text that summarizes and/or introduces the page's content.
  • An image: Required for landing pages, optional for all other page types (used on detail pages only if it adds editorial value).
  • Additional design options on a website's home page, and also the integration of a custom logo.

For specialty pages such as "People," "News," and "Events," the header is created automatically.

Footer

© LMU Referat VI.5 Internetdienste

The footer contains contact information for your institution, links to up to four social media channels, and can be customized by your project administration or the central support team as needed.

In addition, the footer contains other legally relevant information, such as data protection regulations, accessibility information, and your institution's legal notice.

Navigation elements

© LMU Referat VI.5

Hamburger menu

The so-called hamburger menu is the main navigation bar on every page and appears consistently across all pages of your website.

The hamburger menu contains...

  • "Menu items" you have defined for navigation
  • The superior institution (e.g., LMU or a faculty)
  • For multilingual websites: A link to the second language that, on mobile devices, allows users to navigate exclusively to the second language

© LMU Referat VI.5 Internetdienste

Breadcrumb menu

At the top left is the so-called breadcrumb menu that shows which sub-section of the website you are currently in. You can use this navigation menu to jump up one or more levels in the site hierarchy.

Only pages that have a "menu item" are displayed here.

Quick Links / Deep Links

To the left of the hamburger menu are three horizontal navigation items that serve as quick links to the most important subpages of your website. Just like the hamburger menu, they appear on every page.

These navigation points are typically defined as part of the go-live process, but can also be adjusted later by the project administration team or central support.

© LMU Referat VI.5 Internetdienste

Jump labels (optional)

Jump labels can be optionally enabled for individual pages across all page types. They are generated automatically and create a table of contents listing a page’s main headings, allowing users to quickly jump to specific topics.

Jump labels can be used in a simple form that display only the headings of the paragraph modules, or as a table of contents that provides a more detailed list of heading hierarchies on the page.

For pages with a lot of content, jump links should always be enabled.

What should I keep in mind when designing the navigation structure?

Website navigation helps users find their way around your website and quickly locate the topics that are relevant to them. A good navigation structure improves accessibility as well as the site’s discoverability and search engine rankings.

Challenges:

  • If you create too many pages with menu items at the same level, not all items will be relevant to the target audience and the menu will appear cluttered. “If everything is important, nothing is important.”
  • If the structure isn’t intuitive for your target audience, relevant content won’t be found—or will only be found after a long series of clicks. Users will quickly feel lost on the website.

Recommendations:

  • When creating the navigation structure, use your original concept and sitemap as a guide.
  • Group logically related topics under a single menu item. Rule of thumb: Try not to include more than 4–7 menu items in the first few levels of navigation.
  • Place topics that are important to your target audience higher up in the navigation tree.
  • Don’t put everything on the top level: Guide your users step by step toward the topic. To avoid overwhelming users, use broad categories at the top levels, then add more detail.
  • Use a consistent structure, such as a uniform sub-structure for all degree programs or all research projects that are comparable.
  • Create menu items for all central, permanent content, such as main categories and important service pages, which should always be accessible to all user groups.
  • Pages without menu items are ideal for content that should only be accessible via specific paths (e.g., forms, specific detailed information). Note: These pages can only be found via a direct link and are also harder for search engines to find.
  • Use clear terms that are understandable to your target audience, and use them consistently.

Language selection

© Referat VI.5 Internetdienste

If your website is multilingual, users have two options to switch between languages:

  1. Hamburger menu:
    At the bottom of the hamburger menu, there is a separate menu item that allows users to switch to the second language. This option is available on all devices.
  2. Horizontal navigation bar:
    On desktop devices, a language switch button is also displayed in the upper-right corner.

If you scale down the browser window on a desktop device, the second option will disappear. However, users can always select a language in the hamburger menu.