---
meta-title: Structure
title: Page structure
description: The layout used by the Framework is a wrapper that helps structure your page.
cta: The layout used by the Framework is a wrapper to help structure your page content.
hero-class: hero-building-blocks
hero: true
filter-nav: false
filter-dropdowns: false
layout: static
pagetype: meta-pattern
location: page-structure.html
---
{{#markdown}}
This structure is informed by a large amount of UX research, team feedback, and tweaked to be compliant with the EMBL and EMBL-EBI branding. In short: using the boilerplate formats will help save you time, deliver a better experience to the users and keep the branding watchdogs happier.
### Three tiers of structure
The framework page template can be divided into three types:
1 **Centrally governed:** here content and structure are managed by EMBL-EBI (global masthead and global footer), these regions are optional for non EMBL-EBI sites;
2 **Structured with custom content:** the content is managed by a service, but structure is managed by EMBL-EBI (i.e. local masthead and local footer); and
3 **Custom:** content and structure are governed by the service with guidance from the EMBL-EBI Style Lab.
Placement of the above three region types and associated content regions.
### Inside the regions
#### Global masthead (aka: global menu)
The global navigation menu sits at the top of every page. It is designed to be easy to find yet unobtrusive, so as not to confuse users who wish to use the navigation menu for your site.
Local masthead (aka: local menu)
The local menu is the navigation menu for your website and it sits below the main banner. It is optional, since not all projects require their own menu. Since it is a horizontal menu, you need to think about the text length of labels. We recommend that your first menu link is "Home" and your last one is "About [project-name]".
Breadcrumb trail
A breadcrumb can help users understand the structure of sites with a large degree of hierarchy, but you should first rely on the global header, local title, and local menu to indicate structure, using a breadcrumb only when that fails. For guidance on your information architecture, contact the web development team.
#### Content area
The `#content` area is where your core information and application will live, this area should contain content and any secondary navigation.
- Main content area
- The `#main-content-area` holds the core content of your page. This ID will also be used to improve the behaviour of the sticky menu and improve JS Event tracking.
- Secondary menus
- Once the user has selected an item from your local menu, the section may require a secondary navigation menu to display its own child content. Depending on the breadth and depth of content options, there various options: See [the navgiation patterns]({{root}}websites/patterns/menu.html).
#### Relationships
Use the (#relationships
) area to place information and logos from your sponsors/affiliates/collaborators/endorsers. For more guidance [see the affiliates boilerplate page]({{root}}websites/sample-site/boilerplate/affiliates.html).
#### Local footer
Use the local footer (#local-footer
) to describe information that applies to your whole website or to indicate citation information.
#### Global footer
In the global footer of every page there is an expanded version of the global menu, including all sub-items. This acts as a top-level sitemap, available on any page. This will be automatically populated with Javascript into your #global-footer
.
### Putting this into practice
Checkout the boilerplate sample pages
{{/markdown}}