With synced blocks in Notion you can quickly and easily create a navigation bar component for Super. Here’s how to do it!

‍

Step 1: add a synced block to your homepage in Notion

‍

Step 2: add the navigation menu items to the synced block

‍

Step 3: copy and paste your synced block into your other Super pages in Notion

‍

Step 4: hide the linked pages from your Super homepage in Notion

You might notice that the nested pages are still visible on your Super homepage. One way to hide these from your Super site is to nest these pages in a Toggle block. We'll take care of this in the next few steps. For now, create a toggle block and move your pages into the toggle block.

‍

Step 5: find your synced block id

On your Super page, hover over your synced block. Right click on your mouse and click on 'Inspect.' Hover over the synced block and find the block's id. Copy and paste this and head into Super.

Step 6: head into your Super dashboard for your site and click on 'Options' and then 'Edit Code'

‍

Step 7: add some code in Super

The block id you just copied? That is what you will be using in the following code. This code is CSS and controls the look of your navigation bar. You can change the CSS to match the look and feel of your Super site. The important piece here is the block id, which is what the CSS is targeting. Wherever you see '#block-08ce4e2766504d65b1e7420152b40cea' below, replace this with the block id you just copied. This id is unique to you and your site.

The first block of code places the synced block at the top of your page and has some styling attributes. The second block of code removed the underline from each navigation link. The third block of code changes the color of the links when you hover over them.

The last block of code hides the toggle list so your notion sub-pages are hidden from your Super homepage.

‍

‍

Now you have a synced block in Notion that acts as your Super navigation bar!