Page Layout

Sidebars

Customize individual page layout sidebars with snippets.

Page Layout Locations

The Dev Portal page provides pre-defined page-layout locations that can be customized with Snippets. The page-layout property can be defined in the front matter of each page.

  • sidebar-left
  • sidebar-right

The sidebar layout locations allow you to configure a responsive "2 column" or "3 column" layout which is commonly used in Dev Portal documentation, guides etc.

You can choose to configure either of the sidebars independently (left or right), or choose to configure both for a 3-column layout. An example of the 3-column layout can be seen in the Dev Portal's API documentation pages.

Sidebars must refer to a Snippet. The content of each sidebar will be defined in the referenced Snippet.

Usage

Page

In the example Page front matter below, the guides-sidebar-left and guides-sidebar-right refer to the name of the Snippets. Simply define the name of the desired snippet(s) in the page-layout property of the front matter.

---
title: Guides
page-layout:
  sidebar-left: "guides-sidebar-left"
  sidebar-right: "guides-sidebar-right"
---

Snippet

The guides-sidebar-left Snippet in this example would provide navigation between Pages, a typical layout pattern. Here's an example of the snippet content:

Notice we are defining a title property in the front matter of the Snippet. This is used to set the title of the sidebar navigation toggle button on smaller screens, set here to Guides.
---
title: Guides
---

::page-navigation
---
header: "Flights Information"
href: "/guides/flights"
children: true
---
::

The guides-sidebar-right Snippet in this example would provide a table of contents of sections within the current page, using the Page TOC component.

::page-toc
---
title: "On this page"
max-depth: 2
---
::