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' }

// ...

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