Outline Test

Add a Notion-like Floating Outline to Your Site

Enhance the navigation of your Bullet website with a dynamic, Notion-like floating outline. This guide will show you how to implement a sidebar outline that automatically generates from your page's headings, improving content scannability and user experience.

How the Floating Outline Works

This floating outline automatically detects Heading 1, Heading 2, and Heading 3 elements within your Notion content. When rendered on your Bullet site, it creates an interactive sidebar that allows visitors to quickly navigate through your page sections.

Step 1: Structure Your Notion Content with Headings

Before adding the custom code, ensure your Notion page content is structured using headings. The floating outline relies on these headings to build its navigation:
  • Heading 1 (# in Markdown / H1 in Notion): For main sections.
  • Heading 2 (## in Markdown / H2 in Notion): For subsections.
  • Heading 3 (### in Markdown / H3 in Notion): For sub-subsections.
The more clearly you define your content hierarchy with headings in Notion, the more effective and useful your floating outline will be on your live site.

Step 2: Add Custom Code to Your Bullet Website

To enable the floating outline, you need to add custom CSS and JavaScript to your Bullet site. You can add this code globally (affecting all pages) or to a specific page. For a global outline, we recommend adding it to your site's global custom code settings.

2.1 Get the Outline Popup CSS

  1. Open the following URL in your browser to access the CSS code:
      2. https://github.com/dsent/bullet-addons/blob/main/src/outline-popup/outline-popup.css
  1. Copy the entire content of the file.
  1. In your Bullet dashboard, navigate to Code Editor.
  1. Paste the copied CSS code into the CSS section.

2.2 Get the Outline Popup JavaScript

  1. Open the following URL in your browser to access the JavaScript code:
      2. https://github.com/dsent/bullet-addons/blob/main/src/outline-popup/outline-popup.js
  1. Copy the entire content of the file.
  1. In your Bullet dashboard, navigate to Code Editor.
  1. Paste the copied JavaScript code into the Body section.
Alternatively, if you only want the outline on a specific page, you can add the CSS and JavaScript directly within the custom code settings for that particular page in the Bullet editor.

Step 3: Publish Your Page

After adding the custom CSS and JavaScript, you must publish your page or site for the changes to take effect.
  1. Navigate to the page you've modified or your site's dashboard.
  1. Click the Publish button.
Once published, visit your live site to see the Notion-like floating outline in action.