Structure

<Site>
  <Layout>
    <SkipLink />
    <Header>
      <Search />
      <Menu />
    </Header>
    <Breadcrumbs />
    <Main>..</Main>
    <Footer />
  </Layout>
</Site>
The relationship between the structure components

Site

Use this component to:

View Site code on GitHub.

Layout

Use this component to:

  • add space around the page
  • limit the width of the page

View Layout code on GitHub.

Use this component to skip to the main content.

Focus component to reveal.

View Skip Link code and Skip Link research on GitHub.

Use this component to navigate to top and secondary level items.

You should:

  • aim to have the items visible on all viewport sizes

View Menu code and Menu research on GitHub.

Use this component for searches.

View Search code on GitHub.

Use this component to display the Barnardo’s logo and optional Search and Menu.

View Header code and Header research on GitHub.

Use this component to help a user identify their current location.

You should:

  • only represent individual pages

View Breadcrumbs code and Breadcrumbs research on GitHub.

Main

Use this component for the main content of a page.

View Main code on GitHub.

Use this component for the copyright notice and optional links.

View Footer code and Footer research on GitHub.