Table of contents
- 1. Create a section in the Notion sidebar
- 1. Add a new page to the preferred teamspace
- 2. Set up the new page
- 3. Add subpages under the new page
- 4. The new Notion sidebar section is ready
- 2. Create a Super Account
- 3. Connect Notion and Super
- 4. Access the sidebar under the Navigation menu in Super dashboard
- 5. Enable and access the sidebar
- 6. Customize Notion sidebar with Super
- 7. Add a call to action (CTA) button
- 8. Design the sidebar to align with your brand
- 9. Add a logo to the sidebar
- 10. Make the search bar visible on the sidebar
- FAQs
- How to remove Notion calendar right sidebar?
- How to restore the Notion sidebar?
- What is the Notion sidebar shortcut?
- How to hide the Notion sidebar?
- How to resize Notion sidebar?
- How to show a Notion page in the sidebar?
- How to hide a Notion page from the sidebar?
The Notion sidebar lists all the teamspace folders and subpages in a parent-child layout — Folders expand to display the pages they contain. This structure provides easy access to content and a fair degree of flexibility by allowing you to:
- Hide subpages from the sidebar by wrapping them under toggle blocks
- Reorganize folders and pages with simple drag and drop
- Resize the sidebar
- Make it disappear
However, some modern features are missing. For example:
- Making the sidebar appear only up to a certain scroll depth
- Hiding Notion UX, including the workspaces and teamspaces
And more.
While Notion users might not even notice the missing features, they are a big deal for those who use Notion to build sites. From blogs to knowledge bases, all types of websites need a custom sidebar that displays information that is key to any given page or the whole website.
Similar to the Notion navbar, a custom sidebar guides site visitors to relevant pages. It helps them find the right information, enabling deeper engagement and higher conversion rates.
This guide will help you create a custom Notion sidebar for a sample website.
TL;DR
Here’s how to create a sidebar in Notion:
1. Create a section in the Notion sidebar
2. Create a Super Account
3. Connect Notion with Super
4. Access the sidebar under the Navigation menu in Super dashboard
5. Enable the sidebar
6. Add items to the Notion site sidebar
7. Add a call to action button to the sidebar
8. Design the sidebar to align with your brand
9. Add a logo to your sidebar
10. Make the search box visible on the sidebar
Let’s get into details.
1. Create a section in the Notion sidebar
We will first create a new section in the Notion sidebar and collate all the pages that must go to the custom sidebar. This section would have a parent page with all subpages under it.
In the subsequent steps, we will connect the parent page to Super, a Notion site builder, and club all subpages under it.
Here’s how to create a new section in Notion:
1. Add a new page to the preferred teamspace
Click the ‘+’ icon next to the teamspace to add a new page under it.
2. Set up the new page
Add a title, cover image, and icon, and add text to the new Notion page.
3. Add subpages under the new page
Click the ‘+’ icon next to the newly added page to insert subpages under it.
4. The new Notion sidebar section is ready
In the next few steps, we will select from the subpages to appear in the customized Notion sidebar.
2. Create a Super Account
As discussed in the introduction, the Notion sidebar has some limitations. Super overcomes all of them. You get to decide exactly what appears in your sidebar, where it appears, and what it looks like.
Connecting with Super allows you to turn your Notion content into a fully functional website that looks and performs better than Notion Sites. Your site’s sidebar can also be customized with Super.
To create an account, go to the Super App and enter a user ID and password, or use your Google or Apple account to sign up with Super. It won’t take more than a minute.
You’ll have access to the Super dashboard after signing up.
3. Connect Notion and Super
Let’s connect the parent page of our Notion sidebar section with Super. This will set it up as the homepage and also grant Super access to all subpages. We can then decide which subpage should appear in the custom sidebar.
To establish the link between the two tools, click on the ‘New site’ button at the top right of your Super dashboard and select the pricing plan.
Choose from Free, Personal, or Pro site plans and enter the site name and the Notion page URL — the parent page. Finally, click on the ‘Create’ button to complete the integration process.
The Notion page of your sidebar section now appears as a beautiful website in the Super app.
The above image also displays the Super dashboard pane on the left with all available customization options.
4. Access the sidebar under the Navigation menu in Super dashboard
Next, let’s access the Super sidebar customization options.
Start by clicking on the ‘Navigation’ option from the dashboard. There you’ll find settings for all navigation methods - navigation bar, footer, and sidebar.
If you plan to keep your menu items consistent across all menus, you can control the settings from this screen. For example, you can select the site logo and pages that must appear across menus.
But in our example, we want to set up the sidebar alone. So click on the ‘Sidebar’ option.
5. Enable and access the sidebar
Click the grayed out ‘Enable’ option to access the Super sidebar settings.
Super offers four customization options for the sidebar:
1. Editing items that appear in the sidebar
2. Adding a Call to Action button
3. Designing the sidebar
4. Adding a logo
5. Adding search to the sidebar
Let’s explore them one at a time.
6. Customize Notion sidebar with Super
Super allows you to select pages that appear on your Notion sidebar. To edit the sidebar items, start by clicking the ‘Menu items’ option.
Next, click the ‘Add item’ button.
This will open a popup screen which allows you to select from a Notion page, external page, or a list of pages to appear on the sidebar.
We already have some Notion pages to be added to the sidebar — let’s select from them.
For representation purposes, we will add the Pricing page to the sidebar. To do that, click on the ‘Page’ tab, title the page, and search for the page from the ‘Select a page’ drop down.
Finally, add an icon to the page for easy identification and click the ‘Add item’ button to complete the setup.
7. Add a call to action (CTA) button
A call to action button stands out from the text, grabs more attention, and gets more clicks than a regular hyperlink. While it’s optional to add a CTA button to the Notion sidebar, it’s advisable to add one.
To add a CTA button to the sidebar, click on the ‘Call to actions’ option from the Sidebar section. You will land on the ‘Call to actions’ view.
Click ‘Add item’ to open a new popup where you can enter the details for the CTA button.
Add the link to a Notion page or an external page to form the CTA and fill out the ‘Title’ field that contains the text that would appear on the CTA. Finally, click on ‘Add item’ to insert the CTA in the sidebar.
8. Design the sidebar to align with your brand
Your Notion sidebar need not be a plain white background - black text setup. It can be vibrant and represent your brand perfectly.
To style your Notion sidebar in Super, click the ‘Style’ option to access the Sidebar style view.
There you can customize:
- The text and background colors for light and dark modes
- Background color on hovering over a sidebar item
- Color and background of the CTA text
- Width of the sidebar
- Shadow
- Opacity
While we are not done customizing the sidebar, it's a good time to look at it now.
It’s hard to tell it’s a Notion sidebar because the design and UX are so different.
9. Add a logo to the sidebar
The site name is the site logo by default in Super but you can replace it with another logo.
Start by clicking the ‘Logo’ option and turning on the toggle for the ‘Sidebar logo’.
Next, click the ‘Image’ tab and upload your logo.
You can also add another logo for the dark mode view.
Click on ‘Save changes’ after you are done to add the logo to your sidebar.
10. Make the search bar visible on the sidebar
Scroll all the way to the bottom of the ‘Sidebar’ view to access the ‘Sidebar search’ section. You can enable or disable the search bar from there.
FAQs
How to remove Notion calendar right sidebar?
It’s not possible to remove the sidebar from the Notion calendar because you need to schedule meetings.
How to restore the Notion sidebar?
If your Notion sidebar has closed accidentally, use the ‘CMD/CTRL + \’ to make it appear again.
What is the Notion sidebar shortcut?
Use the keyboard shortcut ‘CMD + \’ for Mac and ‘CTRL + \’ for Windows to make the Notion sidebar appear or disappear.
How to hide the Notion sidebar?
Hide the Notion sidebar by clicking on the ‘<<’ icon that appears on the top-right corner of the sidebar. Click on the ‘>>’ icon to expand it again.
Alternatively, use the ‘CMD/CTRL + \’ shortcut to hide or unhide the Notion sidebar.
How to resize Notion sidebar?
You will see the right-border of the Notion sidebar thicken when you hover over it. Click on it when that happens and drag it left or right to resize the sidebar.
How to show a Notion page in the sidebar?
Add the preferred Notion page as a new folder or subfolder under a workspace or a teamspace to make it appear in the sidebar under the relevant section.
How to hide a Notion page from the sidebar?
To hide pages from the sidebar, wrap them in a toggle block inside the parent page.
- Custom design
- SEO options
- Instant page load
Table of contents
- 1. Create a section in the Notion sidebar
- 1. Add a new page to the preferred teamspace
- 2. Set up the new page
- 3. Add subpages under the new page
- 4. The new Notion sidebar section is ready
- 2. Create a Super Account
- 3. Connect Notion and Super
- 4. Access the sidebar under the Navigation menu in Super dashboard
- 5. Enable and access the sidebar
- 6. Customize Notion sidebar with Super
- 7. Add a call to action (CTA) button
- 8. Design the sidebar to align with your brand
- 9. Add a logo to the sidebar
- 10. Make the search bar visible on the sidebar
- FAQs
- How to remove Notion calendar right sidebar?
- How to restore the Notion sidebar?
- What is the Notion sidebar shortcut?
- How to hide the Notion sidebar?
- How to resize Notion sidebar?
- How to show a Notion page in the sidebar?
- How to hide a Notion page from the sidebar?
Content goes here
- Custom design
- SEO options
- Instant page load
Table of contents
- 1. Create a section in the Notion sidebar
- 1. Add a new page to the preferred teamspace
- 2. Set up the new page
- 3. Add subpages under the new page
- 4. The new Notion sidebar section is ready
- 2. Create a Super Account
- 3. Connect Notion and Super
- 4. Access the sidebar under the Navigation menu in Super dashboard
- 5. Enable and access the sidebar
- 6. Customize Notion sidebar with Super
- 7. Add a call to action (CTA) button
- 8. Design the sidebar to align with your brand
- 9. Add a logo to the sidebar
- 10. Make the search bar visible on the sidebar
- FAQs
- How to remove Notion calendar right sidebar?
- How to restore the Notion sidebar?
- What is the Notion sidebar shortcut?
- How to hide the Notion sidebar?
- How to resize Notion sidebar?
- How to show a Notion page in the sidebar?
- How to hide a Notion page from the sidebar?
Content goes here
Get Super’s bi-weekly Notion Newsletter
- Custom design
- SEO options
- Instant page load