Customising layout#

The flexibilty of Guider really shines with its overwritable partials.

Partials#

Partials are sections of the interface, you can replace them and toggle them at will. Here are all possibilities:

• toc: The table of contents section.
• sidebar: The sidebar navigation menu.
• navigation: The header navigation menu.
• contentFooter: The content footer, placed right below content.
• pageEnd: The navigation links below the content, but above the content footer.
• pageFooter: The page footer, placed at the very bottom of the page. Disabled by default.
• logo: The logo, shown in the navigation bar and page footer.
• pageLayout: The entire page, cannot be turned off.

Turning partials on or off#

You can turn off any partial on or off at any layout settings level. Simply set the partial to true or false. Here is an example with the sidebar:

settings: {
  sidebar: false,
}

This will turn off the sidebar for that settings level.

Overwriting the partial#

You can replace any partial with your own component at any layout settings level. Just set the partial to your component function - this will also enable it at the same time. Here is an example that overwrites the logo:

settings: {
  logo: () => <p>My Company<p>,
}

If you are making a more complex partial that needs to display another partial, you can use the theme components (e.g. <GuiderSidebar />). Find all of them in the API reference tab.

Using layouts#

• Making layouts
• How to use them effectively

The default layouts#

The default layouts will always be present. They can not be removed but they can be overwritten. Just add a layout with the same ID as the default layout of your choice. These are the defaults:

• default: The default layout of every page
• page: Layout for simple pages without sidebar, TOC or content footer.
• article: Layout for articles, without a sidebar or content footer.
• raw: Layout for when you just want to make a raw page without any of the other layouts.