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.
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.
Select a navbar type
In the Navbar Type, you can pick from four navbar display options (open toggles for examples):
Add page links to populate your navbar
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.
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
Customize the style of your navbar
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.
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
Adding 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.
Learn more
