Layout slots

Left & Right Sidebars

Potion allows taking some elements from the content of your page and move it to a sidebar on the left and/or right of that content. These sidebars are set to remain visible as users scroll through your content and will adapt to different screen sizes.

To tell Potion what content you want to put in the left and/or right sidebars of a page, you use the potion:slot:left-sidebar or potion:slot:right-sidebar commands. These commands can be set on toggle or synced blocks.

Notice that table of content on the right of this page? This is a standard table of contents blocks in the Notion page that was created within a toggle block starting with potion:slot:right-sidebar.

Footer

Adding a footer works pretty much the same way as sidebars described above. The only difference is the command should be potion:slot:footer. Since we usually want the content of the footer to be replicated across many pages, using a synced block makes sense.

Duplicating slot content across many pages

We often want to put secondary navigation on pages of a site. The left sidebar is a great place for that. Since that navigation probably needs to appear on many pages, using Notion synced blocks will make reusing the same content across multiple pages a breeze.

👷‍♂️

To create a sidebar or footer from a synced block:

From the Notion app, go to a page that is already connected to Potion

Create a synced block:
1. Hover your mouse over an existing block and click the + button appearing on the left. You’ll find the Synced Block option down the list under the Advanced Blocks section
1. Alternatively, use Notion slash commands by adding a new block, typing /synced, and selecting the synced block option.

Inside that new synced block, type potion:slot:left-sidebar, potion:slot:right-sidebar, or potion:slot:footer depending on where you want Potion to place that content.

Make sure you format it as inline code and press enter to start a new block below.

Add more content to the synced block. For example, it could be links to other pages on this wiki.

Once the synced block is created, it can be copied on multiple Notion pages. Changes made to its content will automatically be applied to all pages the synced block has been copied to.

Responsive layout

Potion adapts display of the sidebars to screen sizes. On screens with limited width (mobile phones or tablets in portrait), the left sidebar will become a drawer overlay that can be displayed from a button on the left end of the top navigation bar.

If you have both a left and right sidebar on a page, the left sidebar is considered as primary while the right one is secondary. This means that viewing that page on a small screen, means the right sidebar will eventually disappear from view to make room for the content and left sidebar.

If that screen is so small that even the left sidebar takes up too much space (phones, tablets in portrait mode), it will become an overlay that can be opened using a button in the left corner of the navigation bar of your site.