All Collections
Getting Started
How to add a Navbar to your site
How to add a Navbar to your site

Discover how to make your site navigation easier by adding a customizable navbar.

Charlene Abranilla avatar
Written by Charlene Abranilla
Updated over a week ago

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.

⚡To add a customizable navbar to your Super site, head to your site’s dashboard and select Navbar where you will access all navbar settings.

Select a NavBar type

In the Navbar Type, you can pick from four navbar display options (open toggles for examples):

Default (displays an automatically updated page breadcrumb that cannot be customized)

Simple (links positioned on the right side of navbar)

Balanced (links are in the middle)

Minimal (links are always in overflow/popup menu both on mobile and desktop)

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.

    💡To add additional customization options to your navbar, learn how to add custom code or use the custom Super CSS classes if you already have advanced web development skills.


​

Did this answer your question?