Discover how to make your site navigation easier by adding a customizable navbar. We've made it simple with Super — a few clicks and no coding required.
Add Custom Navbar to Notion Site
Custom Navbar overview
A responsive navigation bar (or navbar) can be found at the top of your site. It contains links to other site pages, any external links, and site branding — logo or site title.
The purpose of a navbar is to give your site a clear structure, make the site more accessible on both mobile and desktop, and help visitors find what they are looking for. At the same time, good navigation can encourage visitors to stay on your site longer.
There are no hard and fast rules on what pages to include in a navbar, but for a multi-page site, you can start with Home, About, and Contact. If you are looking for some inspiration, take a look at some of our user showcase sites built with Super.
If you have a one-page site, you can use navbar to display your site title, logo, or a call-to-action button.
Here are the 6 steps to adding a Notion navigation bar:
1. Select a navigation bar type
In the Navbar Type, you can pick from four navbar display options (open toggles for examples):
2. Add page links to populate the navigation bar in your Notion site
To see what your navbar looks like in the site preview, you first need to add links to populate it:
- Under the Links section, click Add a new link
- Choose Page if you want to add an already existing page on your site or URL if you want to add an external link
- Give it a title and press Add Link
The newly added link will automatically appear in your navbar. You can reorder your links by dragging and dropping them.
If something doesn’t look right, you can remove your links by clicking on each individual link and selecting Remove Link.
If using the Simple or Balanced navbar type you have too many page links to fit in your navbar, switch to Minimal. The condensed hamburger menu (three bars) will hold more pages.
Don’t forget to consider the usability of your site by testing your navbar both on desktop and mobile. You can switch between the two views by pressing the mobile and computer icon on the top right of your site preview.
Add dropdown lists to your Navbar
On larger sites with many sections and many pages a standard, a traditional Navbar cannot contain all the links that may be needed for your users to navigate easily.
Your super Navbar can have drop-down lists, which allow different sections to be highlighted in its own menu that pops down on hover. You can see this on the Super.so homepage
3. Upload a logo or add a site title to describe your brand
Having a logo or site title in your navbar builds brand awareness and lets visitors familiarize themselves with the site owner(s). If you are building a site and don’t have a logo, you can use your full name, initials, brand name, the description of your project, or the purpose of your site put in a few words.
- Under the Logo section select Text to add the site name (you can also add emoji icons)
- Adjust the font size if you chose to display text
- If you have a logo, click on Image to upload it and use the slider to adjust its width
4. Customize the style of your navigation bar
It's easy to customize your navbar to fit your site's design with a few simple steps. Using the Style section, you can modify your navbar’s appearance:
- Background color
- Text color
- Height
- Visibility on scroll (enable the option to have a sticky navbar that follows the page as users scroll down or leave it unticked for a fixed navbar)
- Shadow (you can select the size, color, and opacity of the shadow)
When picking colors, you can manually click to select one, change its hue and opacity, or add HEX, RGBA, or HSLA values if you want to use a particular color. By default, the color picker shows HEX values; to access RGBA and HSLA, click on the two arrows next to the color value input field.
5. Add an attention-grabbing "Call to Action" button
With the Call to Action option, you can add and style a button to direct your site visitors’ attention to a particular page, asset, or anything else. It could be a special offer, a downloadable file, or the latest blog post – anything you want to promote or highlight.
The button will be located on the far right of your navbar, and you can link it to an existing page on your site or an external link:
- Set a title for your button
- Add a destination (select an existing page or add an external link by clicking on URL)
- Pick a background color
- Select text color to fit your navbar
6. Add breadcrumbs to pages
- To add a breadcrumb to a page, you have to use the Notion breadcrumb block on page where you would like the breadcrumb to appear.
- In Notion add the Breadcrumb block by typing
/breadcrumb - Next, in Super, press the dashboard refresh button to load the update page content and show the breadcrumb. Note that the breadcrumb in Super reflects the site structure as it is organized in Super, not Notion.
- Notion left pane: The Notion left pane records all your pages in a folder-subfolder structure. If you have maintained the hierarchy, you can quickly click on any folder and scroll down to the page you want to open.
- Notion search: The Notion search feature prompts you to enter keywords pertinent to the page that you want to find, looks for the page based on your keywords, and displays a list of pages that has those keywords. You can find the page you want to access in the list and click on it to open it.
- Notion Breadcrumbs: Notion breadcrumbs are handy and ever accessible as they are stuck at the top left corner of your Notion page even while you scroll. However, you can access only the pages within the current page hierarchy through this method.
- Notion Navigation Bar: If you have created a Notion website, you can set up navigation menu using Super and add all important pages in your website to it. This way, the key pages are easily accessible.
FAQs
What is a breadcrumb menu in Notion?
Breadcrumbs in Notion are secondary navigation menu that display the path to the page open on the screen. It maps the folder - subfolder flow that the user needs to take to get to that page. It shows the chain of pages starting from the homepage to the current page.
It allows you to easily jump between folders within the hierarchy easily. It is particularly useful if you have a complex hierarchy of pages.
How to navigate in Notion?
There are many ways to navigate to you pages in Notion.
What is the shortcut for Notion navigation?
You can move up the folder hierarchy by using the CMD+[ command if you are using a Mac, or CTRL+[ command if you are on the Windows OS. Similarly, you can move down the folder hierarchy with the CMD/CTRL + ] command.
Learn more
