DocumentationPage

Use this layout to render documentation sites that feature a tree navigation structure. It consists of a SideBar, a PageNavigation, and a content panel.

Responsive behaviour

On xs screens, the content panel will fill the whole page and the PageNavigation will be rendered in a fullscreen container. A MobileToggle can then be used to toggle this navigation.

Defining the layout in a page

Wrap your page within the layout and set the navigation, productName, siteTitle, and yearOfCreation properties. Additionally you can pass a pageTitle for each page.

const navigation: MultiLanguagePageTree = {
  'en-us': [
    {
      title: 'First Section',
      children: [
        { title: 'Page A' },
        { title: 'Page B' }
      ]
    }
  ]
};

// ...

<DocumentationPage
  siteTitle='the native web UX'
  productName='ux'
  navigation={ navigation }
  yearOfCreation={ 2017 }
>
  <div>My page content goes here</div>
</DocumentationPage>